Javascript 如何禁用 Slick Slider 箭头?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31006761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 06:03:07  来源:igfitidea点击:

How to disable Slick Slider arrows?

javascriptjquerysliderarrows

提问by Erum-n

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?

我正在为我的网页使用具有两种不同样式的 Slick 滑块,但我遇到了箭头问题。你能帮我么?

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

这是我的主要 .slider,我已经使用 CSS 为其上一个和下一个箭头设置了样式

http://prntscr.com/7kdpgo

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?

在这里我使用了 Slick 的 .filtering 类,但我不想要这些箭头。如何在此处禁用它们并在设计中添加它们?

http://prntscr.com/7kdq03

http://prntscr.com/7kdq03

回答by user5929999

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

回答by DragosB

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.

从我看到的滑块用 js 生成它自己的箭头(你想从我的理解中删除的那些)。但是它们具有与它们相关联的功能,因此您希望使它们看起来像滑块上方的那些,然后用它们替换顶部的那些。

$(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-backand .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.

您将必须使用与用于小顶部箭头相同的 css 类,而不是.your-class-btn-back.your-class-btn-forward。之后,您可以使用绝对位置移动它们,与您最初制作的重叠,然后读取初始位置。这样它们看起来就像你在打印屏幕上的那些,并具有必要的功能。

回答by Gianluca Ghettini

Just set them to null. Job done!

只需将它们设置为null. 任务完成!

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