<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-6"> <div id="carousel" class="carousel slide carousel-fade" data-touch="true" data-interval="3000" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://unsplash.it/400/300?image=0"> </div> <div class="carousel-item"> <img src="https://unsplash.it/400/300?image=1"> </div> <div class="carousel-item"> <img src="https://unsplash.it/400/300?image=2"> </div> <div class="carousel-item"> <img src="https://unsplash.it/400/300?image=3"> </div> <div class="carousel-item"> <img src="https://unsplash.it/400/300?image=4"> </div> <div class="carousel-item"> <img src="https://unsplash.it/400/300?image=5"> </div> <div class="carousel-item"> <img src="https://unsplash.it/400/300?image=6"> </div> <div class="carousel-item"> <img src="https://unsplash.it/400/300?image=7"> </div> </div> </div> <div class="clearfix"> <div id="thumbcarousel" class="carousel slide" data-touch="true" data-interval="12000" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="https://unsplash.it/400/300?image=0"></div> <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="https://unsplash.it/400/300?image=1"></div> <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="https://unsplash.it/400/300?image=2"></div> <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="https://unsplash.it/400/300?image=3"></div> </div> <div class="carousel-item"> <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="https://unsplash.it/400/300?image=4"></div> <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="https://unsplash.it/400/300?image=5"></div> <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="https://unsplash.it/400/300?image=6"></div> <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="https://unsplash.it/400/300?image=7"></div> </div> </div> <a class="carousel-control-prev" href="#thumbcarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#thumbcarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> </div> </div> <div class="col-sm-6"> <h2>Bootstrap Product Thumbnail Slider</h2> <h3>Responsive and beautifully designed</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quis debitis soluta, tenetur totam id omnis in sed eligendi facere reprehenderit laudantium ipsa maxime. Et illum blanditiis similique in illo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum obcaecati assumenda nisi! Necessitatibus fugit consectetur culpa exercitationem distinctio, dolorem, omnis magni, in dolores provident debitis, temporibus laborum officiis vero? Ut!</p> <a href="http://thecodeblock.com/thumbnail-slider-using-bootstrap" class="btn btn-default">Back to article</a> </div> </div> </div>

/* CSS used here will be applied after bootstrap.css */ .carousel { margin-top: 10px; } .carousel-item .thumb { width: 25%; cursor: pointer; float: left; } .carousel-item .thumb img { width: 100%; margin: 2px; } .carousel-item img { width: 100%; }

var myCarousel = document.querySelector('#thumbcarousel') var carousel = new bootstrap.Carousel(myCarousel, { touch: true })