Question

我遇到了一个Slick滑块的问题，您可以在http://chriswickham.co.uk/startrek/

看到

当滑块循环时，它会暂时显示子元素＆＃34; hero__text＆＃34;拍摄回到第一张幻灯片之前的第一张幻灯片。我无法弄清楚导致它的原因。任何帮助将不胜感激。

HTML

defaults
    mode                    http
    log                     global
    option                  httplog
    option                  dontlognull
    option http-server-close
    #option forwardfor       except 127.0.0.0/8
    option                  redispatch
    retries                 3
    timeout http-request    10s
    timeout queue           1m
    timeout connect         10s
    timeout client          1m
    timeout server          1m
    timeout http-keep-alive 10s
    timeout check           10s
    maxconn                 128

listen stats 127.9.80.3:8080
    mode http
    stats enable
    stats uri /

listen express 127.9.80.2:8080
    cookie GEAR insert indirect nocache
    option httpchk GET /
    http-check expect rstatus 2..|3..|401

    balance leastconn
    server gear-586a4c732d52711f96000127-zolamk ex-std-node847.prod.rhcloud.com:65326 check fall 2 rise 3 inter 2000 cooki$
    server local-gear 127.9.80.1:8080 check fall 2 rise 3 inter 2000 cookie local-586a492489f5cfef6a00002a

CSS / SASS

    <div class="gd-1of1 hero">
        <div class="hero__slide" id="hero__1">
            <div class="hero__text">
                <h1>Top 10 Reasons You Should be Playing Star Trek Online</h1>
            </div>
        </div>
        <div class="hero__slide" id="hero__2">
            <div class="hero__text">
                <h1>Year of Hell: What Star Trek Voyager Should Have Been</h1>
            </div>
        </div>
        <div class="hero__slide" id="hero__3">
            <div class="hero__text">
                <h1>What we know about Star Trek Discovery so far.</h1>
            </div>
        </div>
    </div>

JS

.hero{
    height:600px;
    width:100%;
  &__slide{
    height:600px;
    width:100%;
    position:relative;
  }
  &__text{
    width:100%;
    padding:20px;
    padding-bottom:50px;
    background: rgba(0,0,0,0.7);
    color:#FFF;
    position:absolute;
    bottom:0;
  }
}

Answer 1

更改为：

  $(document).ready(function(){
      $(".hero").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        infinite: true
      });
    });

光滑滑块无法正确循环

1 个答案: