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

Posted 2023-02-25

【中文标题】控制台日志中的轮播响应设置错误

【英文标题】：Carousel responsive settings error in the console log

【发布时间】：2019-12-24 22:15:19

【问题描述】：

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

滑动滑块响应断点设置值无效！

        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 有任何问题为什么我在该特定轮播的控制台日志中只收到一个错误，这有点奇怪？

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

任何建议将不胜感激。 :)

【问题讨论】：

在 catch 部分，你能添加 console.log(e) 并发布它的输出吗？

@NemanjaTodorovic 我在控制台日志中得到invalid responsive setting value line x。

能不能尝试只从一个json断点开始，看看会不会断？像这样：responsiveBreakpointsObj = JSON.parse('["breakpoint":1680,"settings":"slidesToShow":7');

@NemanjaTodorovic 非常感谢您的帮助，我肯定会这样做，但这是我们的实时网站，所以我现在可以这样做。我会尽快尝试并更新问题:)

我试过这个，我仍然得到responsiveBreakpointsObj = JSON.parse('"breakpoint":443,"settings":"slidesToShow":2]');无效

【参考方案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;
               
           

【讨论】：

哦，是的，看来我忘记声明了..谢谢:)

通过添加var numOfSlidesToScroll = 1解决了；谢谢你:)