Carousel indicators & control are not responding to mouse click - html

Question

I have added two carousel slider on my webpage. main header carousel slider is working properly but second one having problems
a. it doesn't auto slide when website load. (but sometimes it does slide)
b. Indicators and Controls are not responding when clicked.
I already checked the following
a. Id, data-target and href
b. z-index
c. Libraries
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/popper.js#1.15.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
**Check CodePen here: **
https://codepen.io/abdulrehman-siddiqi/pen/XWrMgqq
**Working Site: **
http://mirchisamosa.tk

Answer 1

This is a basic bootstrap carousel changed to include 4 images per slide... you will see that I made minor changes to get the multiple images to work...
Working snippet below:
.work-item.active {
display: flex;
margin-left: 0;
}
.carousel-item {
height: 150px;
}
.work-img {
display: inline-block;
max-width: 24% !important;
padding: 10px 10px;
}
.divContollers ul,
.divContollers a {
border: 2px solid red;
height: 40px;
top: 100%;
color: #000;
background: black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class='container-fluid'>
<div class='row'>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item work-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" class='img-fluid' alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item work-item row ">
<div class="work-img col-4 col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/id/952/536/354.jpg" class="img-fluid " alt="img5"></div>
<div class="work-img col-4 col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/id/952/536/354.jpg" class="img-fluid " alt="img6"></div>
<div class="work-img col-4 col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/id/952/536/354.jpg" class="img-fluid " alt="img7"></div>
<div class="work-img col-4 col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/id/952/536/354.jpg" class="img-fluid " alt="img8"></div>
</div>
<div class="carousel-item work-item row ">
<div class="work-img col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/536/354.jpg" class="img-fluid" alt="img9"></div>
<div class="work-img col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/536/354.jpg" class="img-fluid" alt="img10"></div>
<div class="work-img col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/536/354.jpg" class="img-fluid" alt="img11"></div>
<div class="work-img col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/536/354.jpg" class="img-fluid" alt="img12"></div>
</div>
</div>
<div class='divContollers'>
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<!--
-->
</ul>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>