Question

我用这个名为jQuery的插件遇到了这个问题 Slick在首次加载时无法正常运行screenshot，在我单击next或prev之后，它进入了位置screenshot_1，我试图使幻灯片像这样移动 HTML

<div class="modal" id="subscribePopup">
        <div class="subscriptionOffers">
          <div style="text-align: center; font-weight: 900;"><h6 style="font-weight: 900;">One month reecurring payment</h6>
            <p><h1>$30</h1></p>
            <p>/monthly</p>
          </div>
          <div style="text-align: center; font-weight: 900;"><h6 style="font-weight: 900;">Three months reecurring payment</h6>
            <p><h1>$15</h1></p>
            <p>/monthly</p>
          </div>
          <div style="text-align: center; font-weight: 900;"><h6 style="font-weight: 900;">Six months reecurring payment</h6>
            <p><h1>$10</h1></p>
            <p>/monthly</p>
          </div>
          <div style="text-align: center; font-weight: 900;"><h6 style="font-weight: 900;">Anually reecurring payment</h6>
            <p><h1>$5</h1></p>
            <p>/monthly</p>
          </div>
        </div>
  </div>

jQuery

 $(document).ready(function(){
      var slider = $('.subscriptionOffers').slick({
      infinite: true,
      arrows: true,
      centerMode: true,
      centerPadding: '15%',
      initialSlide: 0,
      speed: 300,
      prevArrow:'<div class="prev"><img src="img/prev.png"></div>',
      nextArrow:'<div class="next"><img src="img/next.png"></div>'
      });
});
    $(window).load(function(){
      slider.slick('slickGoTo',2);
      slider.slick('slickGoTo',1);
    });

在窗口加载时不起作用：/

Answer 1

尝试以下操作：

 var $slick;

 $(document).ready(function(){
    $slick = $('.myDiv');

    $slick.slick({
        infinite: true,
        arrows: true,
        centerMode: true,
        centerPadding: '15%',
        initialSlide: 0,
        speed: 300,
        prevArrow:'<div class="prev"><img src="img/prev.png"></div>',
        nextArrow:'<div class="next"><img src="img/next.png"></div>'
    });

    $slick.slick('slickGoTo', 1);
});

Working pen

使用Slick（jQuery插件）slickGoTo不起作用

1 个答案: