Slick Carousel 如何转到幻灯片并根据 href 给它焦点

Question

我对 Slick Slider 有疑问：

基于 href 设置当前幻灯片
基于 href 设置焦点
基于 href 设置 GotoSlide
拖动或单击箭头时不更改当前幻灯片状态

我尝试了很多方法让它起作用，但都失败了。

代码笔：https://codepen.io/kelvinspaces/pen/JjXopVa

JS:

$(function () {
    $('#DailyLifeStyleTabs').slick(DailyLifeStyleTabs());
    GetActiveMenu('');
    function GetActiveMenu(path) {
        if (path != "") {
            var pathName = path;
            return;
        }
        var pathName = $(location).attr('pathname');
        var tabindex = $('#DailyLifeStyleTabs .slick-slide div li a[href="' + pathName + '"]').parents('.slick-slide').data("slick-index");
        $('#DailyLifeStyleTabs').slick("slickGoTo", tabindex);
        $('#DailyLifeStyleTabs .slick-slide').removeClass('slick-current');
        $('#DailyLifeStyleTabs .slick-slide div li a[href="' + pathName + '"]').parents('.slick-slide').addClass('slick-current');
    }
});

幻灯片设置：

//Daily Tabs Settings
function DailyLifeStyleTabs() {
    return {
        dots: false,
        slidesToShow: 7,
        slidesToScroll: 7,
        infinite: true,
        arrows: true,
        //focusOnChange: false
    }
};

HTML:

<ul id="DailyLifeStyleTabs" class="daily-lifestyle-tabs">
  <li><a href="/DailyLifeStyle/NewMums">New Mums</a></li>
  <li><a href="/DailyLifeStyle/CreativeHobbies">Creative Hobbies</a></li>
  <li><a href="/DailyLifeStyle/JustHitTheBall">Just Hit The Ball</a></li>
  <li><a href="/DailyLifeStyle/CycleMania">Cycle Mania</a></li>
  <li><a href="/DailyLifeStyle/StayWarm">Stay Warm</a></li>
  <li><a href="/DailyLifeStyle/RestRelax">Rest Relax</a></li>
  <li><a href="/DailyLifeStyle/PetLover">Pet Lover</a></li>
  <li><a href="/DailyLifeStyle/HouseKeeping">House Keeping</a></li>
  <li><a href="/DailyLifeStyle/WaterSportsLover">Water Sports Lover</a></li>
  <li><a href="/DailyLifeStyle/HygieneMustHaves">Hygiene Must Haves</a></li>
  <li><a href="/DailyLifeStyle/ExtremeSports">Extreme Sports</a></li>
  <li><a href="/DailyLifeStyle/HighStreetFashion">High Street Fashion</a></li>
</ul>

Answer 1

我改了slideToscroll: 1和infinite: true，问题都解决了。

//Daily Tabs Settings
function DailyLifeStyleTabs() {
    return {
        dots: false,
        slidesToShow: 10,
        slidesToScroll: 1,
        infinite: true,
        arrows: true,
        lazyLoad: 'progressive',
    }
};

Slick Carousel 如何转到幻灯片并根据 href 给它焦点

Slick Carousel how to go to a slide and give it focus based on href

html

javascript

jquery

slick.js