光滑的滑块转到第一个幻灯片 [英] Slick slider goto first slide

问题描述

滑动"滑块设置为自动播放.在播放时，幻灯片从左到右或从头到尾.在最后一张幻灯片上到达滑块时，它将开始从最后一张幻灯片向后自动播放到第一张幻灯片.

The Slick slider is set to autoplay. At the time of play, the slides comes from left to right or first to last. When the slider is reached at the last slide, it starts autoplaying from the last slide to first slide in backward direction.

我希望从最后一张幻灯片开始播放而不是从最后一张幻灯片播放.

I want the slider to play from the first slide instead of last when the slider is reached at the last slide.

最初，当无限滚动为"true"时，一切正常. 但是由于需要，我不得不将无限滚动设置为"false".当无限滚动设置为"false"时，发生了上述问题.

Initially when the infinite scroll was 'true', everything was working fine. But due the requirement, I had to set the infinite scroll to 'false'. The above problem occurred when the infinite scroll set to 'false'.

当滑块到达最后一张幻灯片时，我设法显示了警报.我想做的是，当滑块到达最后一张幻灯片时，我想转到第一张幻灯片，而不是显示警报.

When the slider reaches the last slide, I managed to show an alert. What I wanted to do is when the slider reaches the last slide, I wanted to goto first slide instead of showing an alert.

这是小提琴.

$(document).ready(function() {

var slider2 = $('.slider-2').slick({
    dots: true,
    infinite: false,
    autoplay: true,
    autoplaySpeed: 1000,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    cssEase: 'linear'
});

slider2.on('afterChange', function(event, slick, currentSlide){
// slick - is a slider object with a lot of useful info
// currentSlide - is a current slide index (starts from 0)
if( slick.slideCount === currentSlide + 1 ){
     alert('Instead of showing alert goto slide 1.');
}
});

});

<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/css/prism.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<style>
.slick-arrow.slick-disabled {
    display: none !important;
}
</style>
<section id="features" class="blue">
<div class="content">
  <div class="slider slider-2">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
  </div>
</div>
</section>

如果任何人有解决方案/建议，请提供帮助. 预先感谢.

If anyone have a solution/suggestion, please help. Thanks in advance.

推荐答案

正如其他评论者所指出的，如果infinite设置为false，则将无法转到第一张幻灯片.在您的评论中，您提到您不想在第一张幻灯片上显示左箭头，而在最后一张幻灯片上显示右箭头.您可以通过监视currentSlide并根据需要隐藏/显示箭头按钮来实现.

As the other commenters have pointed out, you won't be able to go to the first slide if infinite is set to false. In your comment you mentioned that you don't want to show the left arrow on the first slide and the right arrow on the last slide. You can achieve that by monitoring the currentSlide and hiding/showing the arrow buttons as required.

slider2.on('afterChange', function(event, slick, currentSlide) {
  //If we're on the first slide hide the Previous button and show the Next
  if (currentSlide === 0) {
    $('.slick-prev').hide();
    $('.slick-next').show();
  } else {
    $('.slick-prev').show();
  }

  //If we're on the last slide hide the Next button.
  if (slick.slideCount === currentSlide + 1) {
    $('.slick-next').hide();
  }
});

更新的小提琴

有一个slickGoTo函数，但是如果在afterChange事件处理程序中使用该函数将不起作用.

There's a slickGoTo function, but that doesn't work if used within the afterChange event handler.

这篇关于光滑的滑块转到第一个幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！