Slick - Prevent Disable Arrow Click

by Nataliia Vernyhora

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
<div class="caroselloslick">
  <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>

CSS

h3 {
  background: #fff;
  color: black;
  font-size: 36px;
  line-height: 100px;
  margin: 10px;
  padding: 2%;
  position: relative;
  text-align: center;
}

.caroselloslick {
  width: 80%;
  margin: auto;
}
.slick-arrow:before {
  background: blue;
}

JavaScript

$(".caroselloslick").slick({
  lazyLoad: 'ondemand',
  infinite: false,
  slidesToShow: 4,
  slidesToScroll: 1,
 });

 function checkArrowState($arrow) {
  if ($arrow.attr('aria-disabled') == 'true') {
    $arrow.attr('disabled', 'disabled');
  } else {
    $arrow.removeAttr('disabled');
  }
}

$('.caroselloslick').on('afterChange', function(event, slick, currentSlide, nextSlide) {
	console.log(event);
  checkArrowState($('.slick-arrow:eq(0)')); //Previous arrow
  checkArrowState($('.slick-arrow:eq(1)')); //Next arrow
});