пятно отключено класс на следующей стрелке - PullRequest
Новая
       9

пятно отключено класс на следующей стрелке

1 голос
/ 13 марта 2020

У меня есть следующие 2 ползунка, где второй ползунок - это навигационная миниатюра для первого ползунка, и все работает нормально, за исключением класса slick-disabled для следующей стрелки

Как вы можете видеть из демонстрации , класс добавляется в нижнюю кнопку перехода по следующему ползунку навигации, когда ползунок перестает скользить - даже если вы все еще можете нажать следующую кнопку, чтобы продолжить скольжение по верхнему главному ползунку

Есть ли способ сделать это отключенным, только когда верхний слайдер доходит до последнего слайда? 

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

1 Ответ

1 голос
/ 13 марта 2020

Вы можете рассмотреть события и проверять каждый раз, когда вносите изменения, чтобы применить класс: 

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