i am using 3 bootstrap modal buttons ,on each button i want to display three different modals,and on each modal i am trying to display three different thumbnail carousels ,but in my code it was working for only the first modal, in first modal thumbnail carousel, on click of each thumbnail the carousel is responding , but in the second and third modal thumbnail carousel ,the thumbnail onclick functionality is not working,can any one solve my problem..please
.product-slider { padding: 45px; }
.product-slider #carousel { border: 4px solid #1089c0; margin: 0; }
.product-slider #thumbcarousel { margin: 12px 0 0; padding: 0 45px; }
.product-slider #thumbcarousel .item { text-align: center; }
.product-slider #thumbcarousel .item .thumb { border: 4px solid #cecece; width: 20%; margin: 0 2%; display: inline-block; vertical-align: middle; cursor: pointer; max-width: 98px; }
.product-slider #thumbcarousel .item .thumb:hover { border-color: #1089c0; }
.product-slider .item img { width: 100%; height: auto; }
.carousel-control { color: #0284b8; text-align: center; text-shadow: none; font-size: 30px; width: 30px; height: 30px; line-height: 20px; top: 23%; }
.carousel-control:hover, .carousel-control:focus, .carousel-control:active { color: #333; }
.carousel-caption, .carousel-control .fa { font: normal normal normal 30px/26px FontAwesome; }
.carousel-control { background-color: rgba(0, 0, 0, 0); bottom: auto; font-size: 20px; left: 0; position: absolute; top: 30%; width: auto; }
.carousel-control.right, .carousel-control.left { background-color: rgba(0, 0, 0, 0); background-image: none; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Modal 1</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Modal 2</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal3">Modal 3</button>
</div>
</div>
</div>
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
ID's have to be unique. Give each carousel and each thumbcarousel an ID of its own and you're good to go. Use classes for styling them.
.product-slider {
padding: 45px;
}
.product-slider .carousel {
border: 4px solid #1089c0;
margin: 0;
}
.product-slider .thumbcarousel {
margin: 12px 0 0;
padding: 0 45px;
}
.product-slider .thumbcarousel .item {
text-align: center;
}
.product-slider .thumbcarousel .item .thumb {
border: 4px solid #cecece;
width: 20%;
margin: 0 2%;
display: inline-block;
vertical-align: middle;
cursor: pointer;
max-width: 98px;
}
.product-slider .thumbcarousel .item .thumb:hover {
border-color: #1089c0;
}
.product-slider .item img {
width: 100%;
height: auto;
}
.carousel-control {
color: #0284b8;
text-align: center;
text-shadow: none;
font-size: 30px;
width: 30px;
height: 30px;
line-height: 20px;
top: 23%;
}
.carousel-control:hover,
.carousel-control:focus,
.carousel-control:active {
color: #333;
}
.carousel-caption,
.carousel-control .fa {
font: normal normal normal 30px/26px FontAwesome;
}
.carousel-control {
background-color: rgba(0, 0, 0, 0);
bottom: auto;
font-size: 20px;
left: 0;
position: absolute;
top: 30%;
width: auto;
}
.carousel-control.right,
.carousel-control.left {
background-color: rgba(0, 0, 0, 0);
background-image: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Modal 1</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Modal 2</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal3">Modal 3</button>
</div>
</div>
</div>
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel_1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="https://picsum.photos/950/500?image=1"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=2"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=3"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=4"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=5"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=6"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=7"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=8"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=9"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=10"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel_1" class="carousel thumbcarousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel_1" data-slide-to="0" class="thumb"><img src="https://picsum.photos/60/60?image=1"></div>
<div data-target="#carousel_1" data-slide-to="1" class="thumb"><img src="https://picsum.photos/60/60?image=2"></div>
<div data-target="#carousel_1" data-slide-to="2" class="thumb"><img src="https://picsum.photos/60/60?image=3"></div>
<div data-target="#carousel_1" data-slide-to="3" class="thumb"><img src="https://picsum.photos/60/60?image=4"></div>
<div data-target="#carousel_1" data-slide-to="4" class="thumb"><img src="https://picsum.photos/60/60?image=5"></div>
</div>
<div class="item">
<div data-target="#carousel_1" data-slide-to="5" class="thumb"><img src="https://picsum.photos/60/60?image=6"></div>
<div data-target="#carousel_1" data-slide-to="6" class="thumb"><img src="https://picsum.photos/60/60?image=7"></div>
<div data-target="#carousel_1" data-slide-to="7" class="thumb"><img src="https://picsum.photos/60/60?image=8"></div>
<div data-target="#carousel_1" data-slide-to="8" class="thumb"><img src="https://picsum.photos/60/60?image=9"></div>
<div data-target="#carousel_1" data-slide-to="9" class="thumb"><img src="https://picsum.photos/60/60?image=10"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel_1" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a>
<a class="right carousel-control" href="#thumbcarousel_1" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel_2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="https://picsum.photos/950/500?image=11"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=12"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=13"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=14"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=15"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=16"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=17"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=18"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=19"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=20"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel_2" class="carousel thumbcarousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel_2" data-slide-to="0" class="thumb"><img src="https://picsum.photos/60/60?image=11"></div>
<div data-target="#carousel_2" data-slide-to="1" class="thumb"><img src="https://picsum.photos/60/60?image=12"></div>
<div data-target="#carousel_2" data-slide-to="2" class="thumb"><img src="https://picsum.photos/60/60?image=13"></div>
<div data-target="#carousel_2" data-slide-to="3" class="thumb"><img src="https://picsum.photos/60/60?image=14"></div>
<div data-target="#carousel_2" data-slide-to="4" class="thumb"><img src="https://picsum.photos/60/60?image=15"></div>
</div>
<div class="item">
<div data-target="#carousel_2" data-slide-to="5" class="thumb"><img src="https://picsum.photos/60/60?image=16"></div>
<div data-target="#carousel_2" data-slide-to="6" class="thumb"><img src="https://picsum.photos/60/60?image=17"></div>
<div data-target="#carousel_2" data-slide-to="7" class="thumb"><img src="https://picsum.photos/60/60?image=18"></div>
<div data-target="#carousel_2" data-slide-to="8" class="thumb"><img src="https://picsum.photos/60/60?image=19"></div>
<div data-target="#carousel_2" data-slide-to="9" class="thumb"><img src="https://picsum.photos/60/60?image=20"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel_2" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i> </a>
<a class="right carousel-control" href="#thumbcarousel_2" role="button" data-slide="next"><i
class="fa fa-angle-right" aria-hidden="true"></i> </a>
</div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel_3" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="https://picsum.photos/950/500?image=21"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=22"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=23"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=24"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=25"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=26"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=27"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=28"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=29"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=30"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel_3" class="carousel thumbcarousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel_3" data-slide-to="0" class="thumb"><img src="https://picsum.photos/60/60?image=21"></div>
<div data-target="#carousel_3" data-slide-to="1" class="thumb"><img src="https://picsum.photos/60/60?image=22"></div>
<div data-target="#carousel_3" data-slide-to="2" class="thumb"><img src="https://picsum.photos/60/60?image=23"></div>
<div data-target="#carousel_3" data-slide-to="3" class="thumb"><img src="https://picsum.photos/60/60?image=24"></div>
<div data-target="#carousel_3" data-slide-to="4" class="thumb"><img src="https://picsum.photos/60/60?image=25"></div>
</div>
<div class="item">
<div data-target="#carousel_3" data-slide-to="5" class="thumb"><img src="https://picsum.photos/60/60?image=26"></div>
<div data-target="#carousel_3" data-slide-to="6" class="thumb"><img src="https://picsum.photos/60/60?image=27"></div>
<div data-target="#carousel_3" data-slide-to="7" class="thumb"><img src="https://picsum.photos/60/60?image=28"></div>
<div data-target="#carousel_3" data-slide-to="8" class="thumb"><img src="https://picsum.photos/60/60?image=29"></div>
<div data-target="#carousel_3" data-slide-to="9" class="thumb"><img src="https://picsum.photos/60/60?image=30"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel_3" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i> </a>
<a class="right carousel-control" href="#thumbcarousel_3" role="button" data-slide="next"><i
class="fa fa-angle-right" aria-hidden="true"></i> </a>
</div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
It is the issue of duplicated ids. All the carousels have id="carousel". Make it unique like this,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Modal 1</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Modal 2</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal3">Modal 3</button>
</div>
</div>
</div>
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel2" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel2" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel3" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel3" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel3" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
Related
I need to make Image Slider with two images per slide by using HTML and CSS alone.
What I have trying:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="./resources/images/image1.jpg" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Image 1</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image2.jpg" alt="Image 2" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Image 2</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image3.jpg" alt="Image 3" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Image 3 Image 3</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="./resources/images/image4.jpg" alt="Image 4" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Image 4 Image 4</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image5.jpg" alt="Image 5" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 5</h3>
<p>Image 5 Image 5</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image6.jpg" alt="Image 6" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 6</h3>
<p>Image 6 Image 6</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The above code Shows only 1 image per slide(1st Column) and Empty space in 2nd Column.
Expected Output:
I need two columns with two images. When I hit Next Control, next two images will appear. When I hit Previous Control, previous two images will appear. (All this done by HTML and CSS alone not JS or others.)
I hope you all understand!
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Image 1</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Image 2</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Image 3 Image 3</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Image 4 Image 4</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 5</h3>
<p>Image 5 Image 5</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 6</h3>
<p>Image 6 Image 6</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
you can do this
hi I am looking for a solution on how to fix my carousel for my images where I want to centralize and close the gap between the 2 images. I tried searching the internet for a solution but I found none. I thought of changing the CSS but I can't figure out what to change. Please help.
Html Code for Carousel
.img-container {
position: relative;
display: inline-block;
}
.img-container .overlay {
position: absolute;
top: 0;
left: 0;
width: 241px;
height: 143px;
background: rgba(0, 0, 0, 0.5);
margin: 0px 0px 0px 8px;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.img-container:hover .overlay {
opacity: 1;
}
.overlay span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.course {
width: 249px;
height: 145px;
}
<div class="carousel slide" data-ride="carousel" id="multi_item">
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course16.jpg" alt="1 slide">
<div class="overlay pointer">
<span>CCTV Technology and Installation</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course8.jpg" alt="2 slide">
<div class="overlay pointer">
<span>Windows XP, 7, 8 & 10 Installation</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course16.jpg" alt="3 slide">
<div class="overlay pointer">
<span>CCTV Course</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course29.jpg" alt="4 slide">
<div class="overlay pointer">
<span>Computer Server Installation & Configuration</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course24.jpg" alt="5 slide">
<div class="overlay pointer">
<span>Computer Network Configuration & Troubleshoot</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course10.jpg" alt="6 slide">
<div class="overlay pointer">
<span>Printer Troubleshoot & Maintenance</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course23.jpg" alt="7 slide">
<div class="overlay pointer">
<span>Windows 7 Support and Deployment</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course20.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course20.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course20.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#multi_item" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#multi_item" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
This space is caused by the padding-left and padding-right properties amounting to 15px by the col-sm class;
so, we just override it in our CSS with a value of 2px; I had to use !important here but if you write the <style> block after loading the bootstrap.css, you wouldn't need this !important - Complete working snippet below:
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
.img-container {
position: relative;
display: inline-block;
}
.img-container .overlay {
position: absolute;
top: 0;
left: 0;
width: 241px;
height: 143px;
background: rgba(0, 0, 0, 0.5);
margin: 0px 0px 0px 8px;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.img-container:hover .overlay {
opacity: 1;
}
.overlay span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.course {
width: 249px;
height: 145px;
}
.col-sm {
padding-left: 2px !important;
padding-right: 2px !important;
}
<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="carousel slide" data-ride="carousel" id="multi_item">
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="1 slide">
<div class="overlay pointer">
<span>CCTV Technology and Installation</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="2 slide">
<div class="overlay pointer">
<span>Windows XP, 7, 8 & 10 Installation</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="3 slide">
<div class="overlay pointer">
<span>CCTV Course</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="4 slide">
<div class="overlay pointer">
<span>Computer Server Installation & Configuration</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="5 slide">
<div class="overlay pointer">
<span>Computer Network Configuration & Troubleshoot</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="6 slide">
<div class="overlay pointer">
<span>Printer Troubleshoot & Maintenance</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="7 slide">
<div class="overlay pointer">
<span>Windows 7 Support and Deployment</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#multi_item" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#multi_item" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
What I really want to achieve is that to put the background image to a specific height like I have one section which contains two divs I gave the section a background image
which is
background-image: linear-gradient(-207deg, #0EC573, #0093FF);
Now I want to achieve is the background image covers the whole of the Second div and some part of the first div
FULL CODE
<section class="company py-4" >
<div class="container">
<div class="row">
<div class="col-12">
<div class="mt-5 px-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="{!! asset('images/Company/02.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item ">
<div class="justify-content-center align-items-center">
<img class="img-fluid" src="{!! asset('images/Company/01.jpg') !!}">
</div>
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/03.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/04.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12 ">
<h1 class="text-left heading">Company</h1>
<p class="text-left description"> ALL THE DESCRIPTION</p>
</div>
</div>
</div>
</section>
Use it (See JSFiddle:https://jsfiddle.net/Lfxja1e5/7/) :
background-size: 100% 70%;
background-repeat: no-repeat;
**If you want it in bottom use:
background-position: bottom;
.company{
background-image:linear-gradient(-207deg,#0EC573, #0093FF);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: bottom;
}
<section class="company py-4" >
<div class="container d1">
<div class="row">
<div class="col-12">
<div class="mt-5 px-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="{!! asset('images/Company/02.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item ">
<div class="justify-content-center align-items-center">
<img class="img-fluid" src="{!! asset('images/Company/01.jpg') !!}">
</div>
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/03.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/04.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="container d2">
<div class="row justify-content-center align-items-center">
<div class="col-12 ">
<h1 class="text-left heading">Company</h1>
<p class="text-left description"> ALL THE DESCRIPTION</p>
</div>
</div>
</div>
</section>
hi so this is the code
<div id='mai'>
<div class="jumbotron">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/2.jpg" alt="">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">pre</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">nx</span>
</a>
</div>
</div>
</div>
</div>
<h3>Example heading <span class="label label-default">New</span></h3>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/4.jpg" alt="..">
<div class="caption">
<h3>برنده لوح تقدیر</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
i tried to change the height and width with class mai , but it wont change my carousel div height and it will broke my thumbnails and brings them upward towards the main carousel ...
what should i do ????
I am creating a bootstrap carousel using Bootstrap 3x. I want to have 2 divs one (col-md-9) for Big image and another one (col-md-3) for displaying respective carousel caption. I want to have thumbnail at the bottom (col-md-12).
Currently, I am able to display carousel with thumbnail but when i try to add a div for carousel's caption it don't fit as i wanted.
My codes for current
<div class="container">
<div class ="row">
<!--Carousel-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active ">
<img class="image" src="img/construction.JPG">
</div><!-- /item -->
<div class="item">
<img class="image" src="img/scaffolding.JPG">
</div>
<div class="item">
<img class="image" src="img/construction-iron.JPG">
</div>
<div class="item">
<img class="image" src="img/Bridge-Construction-Swale-Bridge.JPG">
</div>
<div class="item">
<img class="image" src="img/industrial-building-construction-scaffolding.JPG">
</div>
<div class="item">
<img class="image" src="img/men-at-building-construction.JPG">
</div>
<div class="item">
<img class="image" src="img/Construction-Workers.JPG">
</div>
<div class="item">
<img class="image" src="img/building-construction.JPG">
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
</div>
<div class ="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/Bridge-Construction-Swale-Bridge.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/Construction-Workers.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
</div>
<!-- /.carousel -->
</div><!--/.container-->
Try 1 with caption
The problem with following is the caption's text don't appear
<div class="container">
<div class ="row">
<!--Carousel-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site! 5a4UkoC9vURkjKVHTBAgi7</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div><!-- /item -->
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction-iron.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Bridge-Construction-Swale-Bridge.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/industrial-building-construction-scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/men-at-building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Construction-Workers.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
</div>
<div class ="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/Bridge-Construction-Swale-Bridge.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/Construction-Workers.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
</div>
<!-- /.carousel -->
</div><!--/.container-->
Try 2 with caption
The problem with following is the caption's text don't appear on big screen and appear on the big image div when browser is smaller
<div class="container">
<div class ="row">
<!--Carousel-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active ">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site! 5a4UkoC9vURkjKVHTBAgi7</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div><!-- /item -->
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site2!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction-iron.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Bridge-Construction-Swale-Bridge.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/industrial-building-construction-scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/men-at-building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Construction-Workers.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
</div>
<div class ="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/Bridge-Construction-Swale-Bridge.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/Construction-Workers.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
</div>
<!-- /.carousel -->
</div><!--/.container-->
I've made a fork from the example I gave you.
HTML:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="col-sm-4" id="carousel-text"></div>
<div id="slide-content" style="display: none;">
<div id="slide-content-0">
<h2>Slider One</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-1">
<h2>Slider Two</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-2">
<h2>Slider Three</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-3">
<h2>Slider Four</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-4">
<h2>Slider Five</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-5">
<h2>Slider Six</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
<div class="row hidden-xs" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/170x100&text=six"></a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
JS:
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
Functional Bootply: http://www.bootply.com/zaKtDsH6V4