<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" media="all" href=" https://unpkg.com/flickity@2/dist/flickity.min.css" /> <script src=" https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <div class="main-carousel"> <div class="carousel-cell bg bg-1"></div> <div class="carousel-cell bg bg-2"></div> <div class="carousel-cell bg bg-3"></div> </div> <div class="custom-dots"> <div class="dot"> <div class="fill"></div> </div> <div class="dot"> <div class="fill"></div> </div> <div class="dot"> <div class="fill"></div> </div> </div>

* { box-sizing: border-box; } html, body { font-family: sans-serif; margin: 0; padding: 0; width: 100%; height: 100%; } .main-carousel { height: 100%; background-color: #000000; } .carousel-cell { width: 100%; height: 100%; opacity: 0; z-index: -1; transition: opacity 1000ms ease 500ms; } .carousel-cell.is-selected { opacity: 1; z-index: 1; transition: opacity 1000ms ease; } .carousel-cell.bg { background-repet: no-repeat; background-position: center center; background-size: cover; } .carousel-cell.bg-1 { background-image: url("https://images.unsplash.com/photo-1482855549413-2a6c9b1955a7?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="); } .carousel-cell.bg-2 { background-image: url("https://images.unsplash.com/photo-1464468164664-850fcaf6be4a?dpr=2&auto=compress,format&fit=crop&w=1199&h=820&q=80&cs=tinysrgb&crop="); } .carousel-cell.bg-3 { background-image: url("https://images.unsplash.com/photo-1473357237784-6e0cb4e70a67?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="); } .custom-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); } .custom-dots .dot { position: relative; display: inline-block; width: 50px; height: 2px; background-color: #2B2B2B; margin: 0 2px; } .custom-dots .dot .fill { position: absolute; width: 0; height: 100%; background-color: #FF2D00; transition: width 0 linear; } .custom-dots .dot.filling .fill { width: 100%; transition: width 3900ms linear; }

var $carousel = $('.main-carousel').flickity({ setGallerySize: false, prevNextButtons: false, wrapAround: true, autoPlay: 4000, pageDots: false, selectedAttraction: 1, friction: 1 }); var dotcount = $('.custom-dots > .dot').length; console.log(dotcount); var flkty = $carousel.data('flickity'); var selectedIndex = flkty.selectedIndex; $('.dot').eq(selectedIndex).addClass('filling'); $carousel.on('settle.flickity', function() { if (flkty.selectedIndex != selectedIndex) { //console.log(flkty.selectedIndex); selectedIndex = flkty.selectedIndex; //console.log(selectedIndex); if(selectedIndex == 0) { $('.dot').each(function() { $(this).removeClass('filling'); }); } setTimeout(function () { $('.dot').eq(selectedIndex).addClass('filling'); }, 10); } });