Javascript Responsive Breakpoints Are Not Working

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
                        }
                    }]
                });
            });

JavaScript
​x
 
 $(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;
}

JavaScript
 
/*=============== 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>

JavaScript
 
<!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>

Answer

should be settings, not setting

responsive: [{
  breakpoint: 768,
  settings: {
   slidesToShow: 4
  }
}, {
  breakpoint: 520,
  settings: {
    slidesToShow: 3
  }
}]

JavaScript
 
responsive: [{
  breakpoint: 768,
  settings: {
   slidesToShow: 4
  }
}, {
  breakpoint: 520,
  settings: {
    slidesToShow: 3
  }
}]
​

Advertisement

Answer