控制台日志中的 Carousel 响应设置错误

Question

我的页面中有一些 jcarousel 具有相同的 responsive 设置，所有其他设置都相同，但对于其中一个我收到控制台错误但它有效适合其他轮播：

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

如果这个 responsiveBreakpointsObj 有任何问题，这有点奇怪 为什么我在该特定轮播的控制台日志中只收到一个错误？

我的第二个问题是这个断点设置是否无效，为什么它在每个响应断点上都能正常工作？！

如有任何建议，我们将不胜感激。 :)

Answer 1

我检查了您网站上的代码，问题是变量 numOfSlidesToScroll 未定义。您对 json 的解析实际上没问题:)

这是为您抛出异常的代码部分：

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

控制台日志中的 Carousel 响应设置错误

Carousel responsive settings error in the console log

html

jquery

carousel

razor

slick.js