使用 slick.js 在刷新时记住上次查看的幻灯片

Posted 2023-05-08

【中文标题】使用 slick.js 在刷新时记住上次查看的幻灯片

【英文标题】：Remember last viewed slide on refresh with slick.js

【发布时间】：2020-11-27 10:42:33

【问题描述】：

我使用 slick.js 作为内容浏览器。因此，我的滑块有许多图像可供仔细阅读。我希望能够刷新网页并巧妙地记住我正在查看的最后一张幻灯片。我是 jquery 和 javascript 的新手，因此不胜感激。

这是我正在使用的代码：

$(document).ready(function()
    // Carousel Options
    $('.mycarousel').slick(
        infinite: true,
        accessibility: true, mobileFirst: true,
        adaptiveHeight: true,
        arrows: false, draggable: true,
        useCSS: true, cssEase:'linear', focusOnSelect: true,
        dots: true, appendDots:$(document.innerhtml = "<p>&nbsp;</p>"),
        lazyLoad: 'ondemand',
    );
    $('.leftArrow').on('click', function()
        $('.mycarousel').slick("slickPrev");
    );
    $('.rightArrow').on('click', function()
        $('.mycarousel').slick("slickNext");
    );
    $(window).on('resize orientationchange', function() 
        $('.mycarousel').slick('resize');
    );
);

【问题讨论】：

您有机会提供您正在使用的代码吗？在不知道您真正解决的问题是什么的情况下，很难提供可接受的答案。

看我的回答。如果它有帮助，请接受作为答案，如果您有任何困难，请询问

抱歉来晚了，项目中断了。我已经添加了我正在使用的代码。

【参考方案1】：

我自己做了一些研究，这是我发现的：

$('#yourCarousel').on('slid.bs.carousel', function () 
    var currentSlide = $('#yourCarousel div.active').index();
    sessionStorage.setItem('lastSlide', currentSlide);
);
if(sessionStorage.lastSlide)
    $("#yourCarousel").carousel(sessionStorage.lastSlide*1);

你也可以使用 sessionStorage 来代替：

localStorage.setItem('lastSlide', currentSlide)

【讨论】：

slid.bs.carousel 不是 Slick 事件，.carousel() 不是 Slick 识别的方法。