<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 ----------> <!-- Slick Slider--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <div class="slider"> <div class="slide"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152229/slider-img-1.jpg" /> </div> <div class="slide"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152229/slider-img-2.jpg" /> </div> <div class="slide"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152229/slider-img-3.jpg" /> </div> </div>

.slider button.slick-prev.slick-arrow:before { background: url("https://cdn.shopify.com/s/files/1/0581/9662/3515/files/Group_345_7ffd67e3-c4d8-4b32-9b5a-fa452f24fc2a.png?v=1661951565") no-repeat; background-position: 100%; } .slider button.slick-next.slick-arrow:before { background: url("https://cdn.shopify.com/s/files/1/0581/9662/3515/files/Group_345.png?v=1661951129") no-repeat; background-position: 100%; } .slider button.slick-prev.slick-arrow { left:25%; z-index: 9; } .slider button.slick-next.slick-arrow { left:30%; z-index: 9; } .slider .slick-arrow { position: absolute; bottom: 0; font-size: 0; padding: 0; border: none; background-color: transparent; } .slider .slick-arrow:before { height: 19px; width: 22px; content: ""; display: flex; align-items: center; justify-content: center; color: #fff; background-size: cover; z-index: 9; cursor: pointer; } .slider .slick-dots { display: flex; justify-content: center; margin: 0; padding: 1rem 0; list-style-type: none; position: absolute; bottom: 0; right: 0; left: 30%; } .slider .slick-dots li { margin: 0 0.25rem; } .slider .slick-dots button { display: block; width: 1rem; height: 1rem; padding: 0; border: none; border-radius: 100%; background-color: #F6F6F6; text-indent: -9999px; } .slider .slick-dots li.slick-active button { background-color: #A6A6A6; }

$('.slider').slick({ infinite: true, dots: true, arrows: true, autoplay: true, autoplaySpeed: 3000, fade: true, fadeSpeed: 1000 });