How to disable Slick Slider arrows?

Question

I'm using Slick sliders with two different styles, for my web page but I'm having a problem with arrows. Can you please help me?

This is my main .slider, I've styled it's prev and next arrows using CSS

http://prntscr.com/7kdpgo

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

http://prntscr.com/7kdq03

Answer 1

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

Answer 2

Just set them to null. Job done!

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

Answer 3

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

$(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
  });
 });

You will have 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 absolute position, overlapping the ones you initially made, and then get read of the initial ones. This way they will look like the ones you have on top of your print-screen, and have the necessary functionality.