我正在使用光滑的轮播作为我的页面导航链接,而我当前的活动菜单项具有“活动”样式以显示我所在的页面。
问题是,如果我点击光滑轨道上屏幕外的菜单项,光滑会在页面重新加载时初始化它的位置,你将看不到我不喜欢的“活动”菜单项。
我的解决方案是在页面加载时简单地使用'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);
}
}