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.

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.

Here is the Fiddle.

$(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.

回答1:

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();
  }
});

Updated Fiddle

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

来源：https://stackoverflow.com/questions/37986346/slick-slider-goto-first-slide

标签

jquery

slick.js