Question

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

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

目前的代码：

<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中使用了这个，但它没有用：

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

任何建议都会得到满足。

Answer 1

你可以通过使用一些js代码

来实现这一点

在按钮上指定一个点击列表器，然后在第一张或最后一张幻灯片（.first / last ().hasClass("slick-current");）中检查是否有，以启用或禁用按钮

见下面的代码：

$(function() {

  $('.myscroller').slick({
    infinite: false,
    arrows: false
  });

  $("#left").hide()

  $(".slick-arrow").on("click", function() {
    var isFirst = $(".slick-slide").first().hasClass("slick-current");
    var isLast = $(".slick-slide").last().hasClass("slick-current");
    isFirst ? $("#left").hide() : $("#left").show();
    isLast ? $("#right").hide() : $("#right").show();
  });

});

function myPrev() {
  $('.myscroller').slick('slickPrev');
}

function myNext() {
  $('.myscroller').slick('slickNext');
}

<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>



<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>

Answer 2

试试这个

    $(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隐藏自定义按钮

2 个答案: