Slick Slider - remove arrows from different slide views

Question

I'm using slick.js to power a slider. I'd like to remove the "previous" arrow when the first slide is active and the "next" arrow when the last slide is active. I may need to remove both arrows when the final slide is active. Is there a slick event function or a jquery function that can do this?

Answer 1

To disable previous arrow on first slide and next arrow on last slide you could define infinite : false, on slick initialization like below.

 $("#slider").slick({
        infinite : false
  });

if you have additional settings just include that in initialization. slider is id of container.

This is to disable arrows on Slider. To remove arrows you could just hide it when first/last slide is active. Go through documentation on how to get active slide on slider and with jquery hide you could hide arrow by class name of arrow button. You could get class/id of arrow button by inspecting element. Right click on arrow and inspect it.

To get current slide: $('#slider').slick('slickCurrentSlide');

To hide or show next arrow: $('.slick-next').show(); or $('.slick-next').hide();

Similarly for prev arrow: $('.slick-prev').show(); or $('.slick-prev').hide();

Heres Fiddle: https://jsfiddle.net/pjfw1wqz/

Answer 2

        // slick init
        startSlick();
        var tickerDiv = $("#animatedHeading");
        function startSlick(slick) {  
            tickerDiv.slick({
                arrows: true,
                infinite: false,
                adaptiveHeight: true
              });
                var current_article = tickerDiv.slick('slickCurrentSlide');
                var total_articles = tickerDiv.slideCount;
                tickerDiv.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
                    current_article = tickerDiv.slick('slickCurrentSlide');
                    total_articles = slick.slideCount;
                    slickArrow();
                });
                slickArrow();
                function slickArrow() {  
                    if(current_article==0){
                       $('.slick-prev').hide();
                    }else{
                       $('.slick-prev').show();
                    }
                    if (current_article==total_articles-3){
                        $('.slick-next').hide();
                    }else{
                        $('.slick-next').show();
                    }
                }
        };  

Answer 3

omg! Slick adds a special class for such arrows - slick-disabled. You need to disable infinite function and add a style for this class.

<script>
    $(document).ready(){
        $('#slider').slick({
            infinite : false, 
        });
    };
</script>
<style>
    .slick-arrow.slick-disabled { 
        display: none !important;
    }
</style>