Slick - Hide Prev/Next Arrow

by Trongnguyen91

HTML

<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/css/style.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/css/prism.css">
<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>

CSS

.slick-arrow.slick-disabled {
  display: none !important;
}

JavaScript

$(document).ready(function() {
  var slider2 = $('.slider-2').slick({
    dots: true,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 1000,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    cssEase: 'linear',
    nextArrow: '<b>CAT</b>'
  });
	
  //Hide the Previous button.
  $('.slick-prev').hide();
  
  slider2.on('afterChange', function(event, slick, currentSlide) {  	
  console.log(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();
    }
  });
});