Slick Carousel的'slickGoTo'没有为隐藏的滑块项目刷新页面?

时间:2017-04-05 09:59:03

标签: javascript jquery html css slick.js

我正在使用光滑的轮播作为我的页面导航链接,而我当前的活动菜单项具有“活动”样式以显示我所在的页面。

问题是,如果我点击光滑轨道上屏幕外的菜单项,光滑会在页面重新加载时初始化它的位置,你将看不到我不喜欢的“活动”菜单项。

我的解决方案是在页面加载时简单地使用'slickGoTo'方法,在那里我将捕获'data-slick-index'属性值并将其与'slickGoTo'方法一起使用,这应该可以解决问题。

然而,似乎发生的事情是如果我点击的光滑项目在页面上可见,那么'slickGoTo'方法可以正常工作。但是,如果该项目是在页面外,它不起作用。

// service menu slick slider
function service_menu_slick() {
    $('#service-menu').slick({
        prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
        nextArrow: '<button type="button" class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',
        slidesToShow: 7,
        infinite: false,
        responsive: [
            {
                breakpoint: 1250,
                settings: {
                    slidesToShow: 6,
                    infinite: false
                }
            }, 
            {
                breakpoint: 1100,
                settings: {
                    slidesToShow: 5,
                    infinite: false
                }
            }, 
            {
                breakpoint: 850,
                settings: {
                    slidesToShow: 4,
                    infinite: false
                }
            },
            {
                breakpoint: 700,
                settings: {
                    slidesToShow: 3,
                    infinite: false
                }
            },
            {
                breakpoint: 550,
                settings: {
                    slidesToShow: 2,
                    infinite: false
                }
            },
            {
                breakpoint: 450,
                settings: {
                    slidesToShow: 1,
                    infinite: false
                }
            }
        ]
    });

    $serviceSlide = $('#service-menu');

    if ($serviceSlide) {

        slideIndex = $('.current_page_item.slick-slide').attr('data-slick-index');
        console.log(slideIndex);
        $('#service-menu').slick('slickGoTo', slideIndex);

    }
}

0 个答案:

没有答案