<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="ccaCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="http://placehold.it/1000x200/999999/cccccc" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="http://placehold.it/1000x200/999999/cccccc" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="http://placehold.it/1000x200/999999/cccccc" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#ccaCarousel" 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="#ccaCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

body { padding-top: 20px; } #ccaCarousel .nav a small { display:block; } #ccaCarousel .nav { background:#eee; } #ccaCarousel .nav a { border-radius:0px; }

$(document).ready( function() { $('#ccaCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#ccaCarousel').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.nav').children().length -1; var current = $('.nav li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.nav li').first().addClass('active'); } } clickEvent = false; }); });