CODEWITHSUNDEEP
javascriptslick.js
Rishika
Rishika

Reputation: 371

disable previous arrow only one time in slick slider

I have written a javascript function to disable "previous" arrow when the current slide is 0, and disable "next" arrow when i have reached the last slide. I want the "previous" arrow to be disabled only once when the page loads, and after that even after reaching the first slide(current slide: 0) i want the "previous" arrow to be visible. Currently, i have 3 slides (0,1,2)

I tried using onload() function to hide the arrow only on loading for the first time, but that didn't work. 

$(function(){  
  $('.hero-slider').slick({ 
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        dots:false,
        infinite: true
    });
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
    if(currentSlide==0)
    {
        $('.slick-prev').hide();
    }
    else if(currentSlide==2)
    {
        $('.slick-next').hide();
    }
});

$('.hero-slider').on('afterChange', function(){
  console.log($('.hero-slider').slick('slickCurrentSlide'));
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
    if(currentSlide==0)
    {
        $('.slick-prev').hide();
        $('.slick-next').show();
    }
    else if(currentSlide==2)
    {
        $('.slick-next').hide();
        $('.slick-prev').show();
    }
    if(currentSlide>0 && currentSlide<2)
    {
        $('.slick-prev').show();
        $('.slick-next').show();
    }
});

Upvotes: 4

Views: 4540

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115232

Only keep the slider initializing code and remove the event handler and other code.

jQuery(function($) {  
 $('.hero-slider').slick({ 
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        dots:false,
        infinite: true
    });
});


jQuery(function($) {  
 $('.hero-slider').slick({ 
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        dots:false,
        infinite: true
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<section class="info-banner">
      <div class="hero-slider">
        <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
          <div class="banner-content info-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula                    eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>          
          </div>
        </div>
        <div class="info-slider-content" style="background-image: url(images/visual3.jpg);">
          <div class="banner-content info-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula                  eget dolor. Aenean massa</p>
          </div>
        </div>
        <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
          <div class="banner-content info-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula                  eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
          </div>
        </div>
      </div>
    </section>

UPDATE : If you want to hide the button initially then update the button within the event handler once(use one() method to execute only once) after the slide is changed.

jQuery(function($) {
  $('.hero-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    infinite: true
  });
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
  $('.slick-prev').toggle(currentSlide != 0);
  $('.slick-next').toggle(currentSlide != 2);

  $('.hero-slider').one('afterChange', function() {
    $('.slick-prev,.slick-next').show();
  });
});


jQuery(function($) {
  $('.hero-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    infinite: true
  });
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
  $('.slick-prev').toggle(currentSlide != 0);
  $('.slick-next').toggle(currentSlide != 2);
  
  $('.hero-slider').one('afterChange', function() {
    $('.slick-prev,.slick-next').show();
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<section class="info-banner">
  <div class="hero-slider">
    <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
      <div class="banner-content info-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
      </div>
    </div>
    <div class="info-slider-content" style="background-image: url(images/visual3.jpg);">
      <div class="banner-content info-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
      </div>
    </div>
    <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
      <div class="banner-content info-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
      </div>
    </div>
  </div>
</section>

Upvotes: 2

Related Questions