<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.1/slick.js"></script> <!-- banner --> <div class="home-slider"> <div> <img src="https://via.placeholder.com/1600x650" class="img-responsive" alt=""> </div> <div> <img src="https://via.placeholder.com/1600x650" class="img-responsive" alt=""> </div> <div> <img src="https://via.placeholder.com/1600x650" class="img-responsive" alt=""> </div> </div>

.home-slider .slick-dots { display: block; position: relative; top: -40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .home-slider .slick-dots li button:before { font-family: 'slick'; font-size: 10px; } .home-slider .slick-dots li button:before { font-family: 'slick'; font-size: 10px; } .slick-next:before { content: "\F285" !important; font-family: 'bootstrap-icons' !important; } .slick-prev:before { content: "\F284" !important; font-family: 'bootstrap-icons' !important; }

$('.home-slider').slick({ infinite: true, dots: true, arrows: false });