I have set some responsive breakpoints in javascript but they arent registering and changing once those breakpoints are met. I have added a snippet of my code along with a link to the fiddle below. Any suggestions or ideas to what the issue might be?
http://jsfiddle.net/p1x9n0wu/3/ – Link to my fiddle
$(document).ready(function(){ $('.customer-logos').slick({ slidesToShow: 5, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1000, arrows: false, dots: false, pauseOnHover:false, responsive: [{ breakpoint: 768, setting: { slidesToShow: 4 } }, { breakpoint: 520, setting: { slidesToShow: 3 } }] }); });
/*=============== Partners ===============*/ .container__partners{ padding-top: 150px; } .slide { border: 1px solid rgb(252, 248, 252); background-color: rgb(252, 248, 252); border-radius: 15%; } .slick-slide{ margin: 0 20px; } .slick-slide img{ width: 100%; } .slick-slider{ position: relative; display: block; box-sizing: border-box; } .slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-track{ position: relative; top: 0; left: 0; display: block } .slick-slide{ display: none; float: left; height: 100%; min-height: 1px; } .slick-slide img{ display: block; } .slick-initialized .slick-slide{ display: block; } .copy{ padding-top: 250px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--=============== REMIXICONS ===============--> <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet"> <!--=============== BOXICONS ===============--> <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'> <!--=============== CSS ===============--> <link rel="stylesheet" href="assets/css/styles.css"> <link rel="stylesheet" href="assets/css/scroll_nav.css"> <title>Safe Choice</title> <meta name="theme-color" content="hsl(196, 60%, 91%)"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="yes"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> </head> <body> <div id="pageloader"></div> <!--==================== MAIN ====================--> <main class="main"> <!--=============== Partners ===============--> <div class="container__partners"> <h2 class="section__title">Clients We Work With</h2> <section class="customer-logos slider"> <div class="slide"><img src="/assets/img/TalLogoTransparent500px copy.png" alt="logo"></div> <div class="slide"><img src="/assets/img/TalLogoTransparent500px copy.png" alt="logo"></div> <div class="slide"><img src="/assets/img/imageedit_2_8369034171.png" alt="logo"></div> <div class="slide"><img src="/assets/img/pinkflower-removebg-preview.png" alt="logo"></div> <div class="slide"><img src="/assets/img/pinkflower-removebg-preview.png" alt="logo"></div> <div class="slide"><img src="/assets/img/pinkflower-removebg-preview.png" alt="logo"></div> <div class="slide"><img src="/assets/img/pinkflower-removebg-preview.png" alt="logo"></div> <div class="slide"><img src="/assets/img/pinkflower-removebg-preview.png" alt="logo"></div> </section> </div> <br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> </main> <script> var loader = document.getElementById("pageloader"); window.addEventListener("load", function(){ loader.style.display = "none"; }) </script> <!--=============== MAIN JS ===============--> <script src="assets/js/main.js"></script> <script src="assets/js/scroll_nav.js"></script> </body> </html>
Advertisement
Answer
should be settings
, not setting
responsive: [{ breakpoint: 768, settings: { slidesToShow: 4 } }, { breakpoint: 520, settings: { slidesToShow: 3 } }]