swiper、slick轮播插件获取点击位置跳转到当前下标位置

客户需求：因导航标签个数和内容过多，采用点击切换展示，要求点击swiper轮播导航菜单中的某一个菜单标签，页面跳转后定位到上次点击的标签；

应用场景：导航标签对应当前内容

实现原理： //1、获取点击之后的sessionStorage中下标 //2、如果下标不为空，则让swiper3切换到对应的下标位置 //3、每次点击之后将下标存储到sessionStorage中

swiper实现方法：

var swiper3 = new Swiper('.lm-click', {
        speed: 1000,
        // loop: true,
        spaceBetween: 0,
        slidesPerView: 3, 
        // autoplay: { 
        //  delay: 60000, stopOnLastSlide: false, 
        //  disableOnInteraction: false, 
        // },
        navigation: {
            nextEl: ".list_sj .swiper-button-next",
            prevEl: ".list_sj .swiper-button-prev",
        },
  
    });

    var lastname = sessionStorage.getItem("columnIndex");
    if (lastname !== null) {
        swiper3.slideTo(lastname, 500, false);
    }
    
    $(".lm-click ul li").click(function () {
            var columnIndex = $(this).index();
            sessionStorage.setItem("columnIndex", columnIndex);
            console.log(columnIndex);
    })
    

slick实现方法

var lastname = sessionStorage.getItem("columnIndex");  
        if (lastname !== null) {  
                $(".section0 ul").slick("slickGoTo", lastname);  
        }  
        $(".section0 ul li").click(function () {  
                var columnIndex = $(this).index();  
                var len = $(".section0 ul li").length - 1  
                if (columnIndex == len) {  
                        columnIndex = len - 1  
                }  
                sessionStorage.setItem("columnIndex", columnIndex);  
                console.log(columnIndex);  
        })
        

www.sxcig.com/sxjtjtywwz/…