Hiding custom buttons with Slick Scroller 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.

Code currently:

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

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>

Any suggestions would be appriciated.

回答1:

You can achieve this by using some js code ,

assign a click listner on button then check wether ist's in the first or last slide ( .first / last ().hasClass("slick-current");), to enable or disable buttton

See below snippet :

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

回答2:

Try this

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

来源：https://stackoverflow.com/questions/50581550/hiding-custom-buttons-with-slick-scroller-carousel