slick.js ASNAV，用于每次重置为第一张幻灯片

Question

我正在使用slick.js插件，并且说出了一个问题，希望有人能帮助我。我有两个旋转木马，都有五张幻灯片，顶部旋转木马一次显示一张幻灯片，底部一次显示全部五张幻灯片。顶部可以通过箭头移动，底部每个单独的幻灯片图像都可以单击，但没有箭头或点。

预期的行为是，我希望点击旋转木马中的一个幻灯片，一次显示五个（底部），以将另一个旋转木马移动到相应的幻灯片（例如，点击底部的幻灯片3将顶部移动到幻灯片3）。类似地，如果有人旋转上面的那张，我想让底部的“活动”幻灯片对应于显示在顶部的幻灯片的数字。

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

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

下面是我的Slick.1.4.1选项（我将Slick.1.4.1与Jquery 3.2.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>

Answer 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>  

就是那张罚单。希望能帮到别人！