Slick.Js asNavFor 每次都重置为第一张幻灯片

Posted 2023-05-07

【中文标题】Slick.Js asNavFor 每次都重置为第一张幻灯片

【英文标题】：Slick.Js asNavFor Resetting to First Slide Each Time

【发布时间】：2018-09-27 11:31:55

【问题描述】：

我正在使用Slick.JS 插件并遇到了一个问题，希望有人能帮助我。我有两个轮播，都有五张幻灯片，顶部轮播一次显示一张幻灯片，底部一次显示全部五张。顶部可以通过箭头移动，底部的每个幻灯片图像都是可点击的，但没有箭头或圆点。

预期的行为是我希望单击轮播中的幻灯片一次显示五个（底部）以将另一个轮播移动到相应的幻灯片（单击底部的幻灯片 3 将顶部移动到幻灯片 3，例如）。同样，如果有人旋转顶部的那个，我希望底部的“活动”幻灯片与顶部显示的幻灯片的编号相对应。

这是我希望它如何运行的示例：https://codepen.io/pjmtokyo/pen/JYyjew。这里的“滑块同步”是另一个，但底部没有箭头：http://kenwheeler.github.io/slick/。

基本上，当我单击顶部导航上的箭头时，底部导航会适当更新（将类“slick-active”添加到相应的幻灯片）。但是，单击底部导航始终会将顶部导航返回到第一张幻灯片。我在做什么错所以点击底部没有适当地更新顶部？

这是我的 Slick 选项（我在 Jquery 3.2.1 中使用 slick.1.4.1）：

  # HOMEPAGE WHO WE SERVE SLIDER
  homepageWhoWeServeSlickOptions =
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,   
    asNavFor: '.home-serve-icons',

  homeServeIconsOptions =
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.home-serve-scroll',
    arrows: false,
    focusOnSelect: true
  $('.home-serve-scroll').slick(homepageWhoWeServeSlickOptions)
  $('.home-serve-icons').slick(homeServeIconsOptions)

  $('.home-serve-icons .slick-slide').removeClass 'slick-active'
  $('.home-serve-icons .slick-slide').eq(0).addClass 'slick-active'

  $('.home-serve-scroll').on 'beforeChange', (event, slick, currentSlide, nextSlide) ->
    mySlideNumber = nextSlide
    $('.home-serve-icons .slick-slide').removeClass 'slick-active'
    $('.home-serve-icons .slick-slide').eq(mySlideNumber).addClass 'slick-active'
    return

这是 Slick 所针对的 html（其中交织的 Twig 代码）：

% from '_macros/button' import button as m_button %
% set whoWeServe = craft.entries.section('homepageWhoWeServe').limit(5) %
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="home-serve-scroll" style="padding: 0px 40px;">
                    % for entry in whoWeServe.all() %
                        <div id="serve- loop.index ">
                            <h2> entry.title </h2>
                             entry.whoWeServeDescription 
                            % set destination = entry.whoWeServeLandingPage.one.getUrl() %
                            % set text = entry.whoWeServeCtaText | default("Learn More") %
                             m_button(destination, text, classes:'important-cta-button') 
                        </div>
                    % endfor %
                </div>
            </div>
        </div>
        <div class="col-md-10 col-md-offset-1">
            <div class="home-serve-icons">
                % for entry in whoWeServe.all() %
                    <div id="serve-icon- loop.index ">
                         entry.title 
                    </div>
                % endfor %
            </div>
        </div>  
    </div>
</section>

【参考方案1】：

所以我能够解决这个问题。 Gouigouix 对这个问题的评论是诀窍：https://github.com/kenwheeler/slick/issues/649

基本上，您的容器 div 中有一个适当的 HTML 标记，它可以工作。我只是有一个 div，里面有一些未包装的文本。所以改变这个：

    <div class="col-md-10 col-md-offset-1">
        <div class="home-serve-icons">
            % for entry in whoWeServe.all() %
                <div id="serve-icon- loop.index ">
                     entry.title 
                </div>
            % endfor %
        </div>
    </div>  

到这里：

    <div class="col-md-10 col-md-offset-1">
        <div class="home-serve-icons">
            % for entry in whoWeServe.all() %
                <div id="serve-icon- loop.index ">
                    <p> entry.title </p>
                </div>
            % endfor %
        </div>
    </div>  

是票。希望对某人有所帮助！