Clever Geek Handbook

How do I disable the Slick Slider arrows?

I am using Slick sliders with two different styles for my web page, but I have a problem with arrows. Can you help me?

This is my main .slider, I designed both the previous and next arrows using CSS

http://prntscr.com/7kdpgo

And here I used the .filtering Slick class, but I don't need those arrows. How can I disable them here and add them to the design?

http://prntscr.com/7kdq03

+3


source to share


3 answers 


<script>
  $('#carouselclass').slick({
     slidesToShow: 3,
     slidesToScroll: 1,
     autoplay: true,
     autoplaySpeed: 1500,
    arrows : false,
  });
</script>


+4


source


From what I can see, the slider generates with js its own arrows (the ones you want to remove from what I understand). But they have functionality associated with them, so you want them to look like the ones above the slider and then replace them on top.



$(document).ready(function(){
		$('.your-class-reg').slick({
	  	   infinite: true,
	  	   slidesToShow: 1,
	  	   slidesToScroll: 1,
	  	   prevArrow: '<a class="your-class-btn-back">Back</a>',
		   nextArrow: '<a class="your-class-btn-forward">Forward</a>',
		   rows: 1
		});
	});
Run codeHide result


You will need to use the same css class you used for the small top arrows instead of .your-class-btn-back

and .your-class-btn-forward

. After that you can move them with an absolute position, overlapping the ones you originally made and then read the initial ones. This way, they will be similar to the ones you have on your printed screen and have the functionality you need.

0


source


Just set a value for them null

. Mission completed!

    <script>
      $('#carouselclass').slick({
         slidesToShow: 3,
         slidesToScroll: 1,
         autoplay: true,
         autoplaySpeed: 1500,
         prevArrow: null,
         nextArrow: null,
      });
    </script>
0


source






More articles:


All Articles