Carousel responsive settings error in the console log

Question

i have some jcarousel in my page with same responsive setting and all other settings are the same, but for one of them i get console error but it works fine for other carousels :

Invalid slick slider responsive breakpoints setting value!

        var responsiveBreakpointsObj = {};
        var carouselHtmlElementId = "@carousel.Settings.CarouselHtmlElementId";
        var jCarousel = $("#" + carouselHtmlElementId + " .slick-carousel"); // Each carousel has different id
 try {

       responsiveBreakpointsObj = JSON.parse('[{"breakpoint":1680,"settings":{"slidesToShow":7}},{"breakpoint":1420,"settings":{"slidesToShow":6}},{"breakpoint":1200,"settings":{"slidesToShow":5}},{"breakpoint":869,"settings":{"slidesToShow":4}},{"breakpoint":616,"settings":{"slidesToShow":3}},{"breakpoint":443,"settings":{"slidesToShow":2}}]');

       for (var i = 0; i < responsiveBreakpointsObj.length; i++) {
               if (responsiveBreakpointsObj[i].settings.slidesToShow < numOfSlidesToScroll) {
                   responsiveBreakpointsObj[i].settings.slidesToScroll = responsiveBreakpointsObj[i].settings.slidesToShow;
               }
           }          
     }
 catch (e) {
             console.log('Invalid slick slider responsive breakpoints setting value!');
           }
jCarousel.slick({      // calling carousel slick
                infinite: true,
                slidesToShow: 8,
                slidesToScroll: 1,
                autoplay: false,
                appendArrows: '.carousel-title',
                cssEase: 'linear',
                respondTo: 'slider',
                edgeFriction: 0.05,
                initialSlide: 0,
                pauseOnHover: true,
                draggable: false,
                responsive: responsiveBreakpointsObj
            });

It's a bit strange if this responsiveBreakpointsObj has any issue why i get only one error in the console log for that specific carousel?

My second question is if this breakpoints setting is invalid why it works fine on every responsive break points?!

Any suggest would be appreciated. :)

Answer 1

I checked the code from your site and the problem is that variable numOfSlidesToScroll is undefined. Your parsing of json is actually ok :)

This is the section of code that throws exception for you:

 for (var i = 0; i < responsiveBreakpointsObj.length; i++) {
               if (responsiveBreakpointsObj[i].settings.slidesToShow < numOfSlidesToScroll) {
                   responsiveBreakpointsObj[i].settings.slidesToScroll = responsiveBreakpointsObj[i].settings.slidesToShow;
               }
           }