CODEWITHSUNDEEP
jquerycssslick.js
Pete
Pete

Reputation: 58442

slick disabled class on next arrow

I have the following 2 sliders where the second slider is a thumbnail nav for the first slider and everything works fine, except for the slick-disabled class on the next arrow

As you can see from the demo, the class is added to the bottom navigation slider next button when the slider stops sliding - even though you can still click the next button to continue sliding the top main slider

Is there a way to make this only disabled when the top slider gets to the last slide?

$(".single-item").slick({
  infinite:false,
  asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
  infinite:false,
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.single-item',
});
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css');

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.slick-disabled {
  cursor: not-allowed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class='container'>
  <div class='single-item'>
    <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>
  <div class='navigation-item'>
    <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>
</div>

Upvotes: 3

Views: 3139

Answers (1)

Temani Afif
Temani Afif

Reputation: 273261

You can consider the events and test each time you make a change to apply the class:

$('.single-item,.navigation-item').on('init', function(event){
   if($('.single-item .slick-prev').attr('aria-disabled')=="true" &&
      $('.navigation-item .slick-prev').attr('aria-disabled')=="true") {
          $('.slick-prev').addClass('disabled');
      }
    else {
          $('.slick-prev').removeClass('disabled');
    }
    
    if($('.single-item .slick-next').attr('aria-disabled')=="true" &&
      $('.navigation-item .slick-next').attr('aria-disabled')=="true") {
          $('.slick-next').addClass('disabled');
      }
    else {
          $('.slick-next').removeClass('disabled');
    }
}
);

$(".single-item").slick({
  infinite:false,
  asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
  infinite:false,
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.single-item',
});

$('.single-item,.navigation-item').on('afterChange', function(event){
   if($('.single-item .slick-prev').attr('aria-disabled')=="true" &&
      $('.navigation-item .slick-prev').attr('aria-disabled')=="true") {
          $('.slick-prev').addClass('disabled');
      }
    else {
          $('.slick-prev').removeClass('disabled');
    }
    
    if($('.single-item .slick-next').attr('aria-disabled')=="true" &&
      $('.navigation-item .slick-next').attr('aria-disabled')=="true") {
          $('.slick-next').addClass('disabled');
      }
    else {
          $('.slick-next').removeClass('disabled');
    }
});
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css');

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.disabled {
  cursor: not-allowed;
}
.slick-next:not(.disabled):before, 
.slick-prev:not(.disabled):before {
  opacity:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class='container'>
  <div class='single-item'>
    <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>
  <div class='navigation-item'>
    <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>
</div>

Upvotes: 2

Related Questions