Slick Carousel, как go слайду и сфокусировать его на основе href - PullRequest
Новая
       235

Slick Carousel, как go слайду и сфокусировать его на основе href

0 голосов
/ 07 августа 2020

У меня проблема с Slick Slider:

  1. На основе набора href Current Slide
  2. На основе набора href Focus
  3. На основе набора href GotoSlide
  4. При перетаскивании или щелчке по стрелке не меняйте текущий статус слайда

Я пробовал много способов заставить его работать, но все они потерпели неудачу.

Codepen: 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>

1 Ответ

0 голосов
/ 08 августа 2020

Поменял slideToscroll: 1 и infinite: true, проблема решена. 

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

введите описание изображения здесь

...