使用Slick Scroller Carousel隐藏自定义按钮 [英] Hiding custom buttons with Slick Scroller Carousel

问题描述

我需要能够在Slick Scoller Carousel的第一张幻灯片上隐藏上一个按钮，而在最后一张幻灯片上隐藏下一个按钮.

I need to be able to hide the previous button when on the first slide or the next button when on the last slide of the Slick Scoller Carousel.

但是，我似乎找不到使用自定义按钮执行此操作的方法.

However I cannot seem to find a way to do this with custom buttons.

当前代码:

<div class="myscroller">
            <div class="item"
               <p>SLIDE 1</p>
            </div>

            <div class="item"
               <p>SLIDE 2</p>
            </div>

            <div class="item"
               <p>SLIDE 3</p>
            </div>
</div>



 <button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>
 <button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button> 



<script type="text/javascript">
$(document).ready(function(){
  $('.myscroller').slick({
      infinite: false,
      arrows: false
  });
});

function myPrev(){
  $('.myscroller').slick('slickPrev');
}

function myNext(){
  $('.myscroller').slick('slickNext');
}
</script>   

我尝试使用某些CSS样式，但无济于事.一篇帖子声称在CSS中使用了此功能，但没有用:

I've tried using some css styling but to no avail. One post claimed to use this in the css, but it didnt work:

    <style>
          .slick-arrow[aria-disabled="true"]{
                opacity: 0;
            }
    </style>

任何建议都会被采纳.

推荐答案

尝试一下

    $(document).ready(function(){
        $('.myscroller').slick({
            infinite: false,
            arrows: true,
            prevArrow:'<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>',
            nextArrow:'<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>',
        });
    });

        .myscroller
        {
            position: relative;
            padding-bottom: 50px;
        }
        .slick-arrow
        {
            position: absolute;
            bottom: 0;
        }
        #left.slick-arrow
        {
            left: 0;
        }
        #right.slick-arrow
        {
            right: 0;
        }
        .slick-arrow.slick-disabled
        {
            opacity: 0;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<div class="myscroller">
  <div class="item">
    <p>SLIDE 1</p>
  </div>

  <div class="item">
    <p>SLIDE 2</p>
  </div>

  <div class="item">
    <p>SLIDE 3</p>
  </div>
</div>

这篇关于使用Slick Scroller Carousel隐藏自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！