Slick slider goto first slide

Question

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.

Change the infinite parameter to true, otherwise it will stop at slide 8. — Incredibly HandSome Samuel
It is set to false because I do not want to show left arrow on first slide and right arrow on last slide. And I updated the snippet as well as Fiddle to hide disabled navigation arrow. — Rick

Yass Yass · Accepted Answer · 2016-06-24T14:45:16

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.

Slick slider goto first slide

1 Answers