Question

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

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

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

基本上，当我单击顶部导航栏上的箭头时，底部的箭头会相应更新（将“光滑活动”类添加到相应的幻灯片中）。但是，单击底部导航将始终将顶部导航返回到第一张幻灯片。我做错了什么，所以点击底部不适当更新顶部？

以下是我的Slick Options（我正在使用带有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>

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>

是票。希望有人帮助！

Slick.Js asNavFor重置为每次首次滑动

1 个答案: