javascript - 将后退按钮隐藏在 Material 转盘中

我有一个材料css旋转木马，我需要隐藏在第一张幻灯片的后退按钮。我试过用邮政局的bewlo密码
下面的代码将停止用户循环
Stop looping in Carousel materializecss

$('.carousel').carousel({fullWidth: true});

 function forward(){
  if ($('.carousel-item.active').next().is('.carousel-item')) {
     $('.carousel').carousel('next');
   } else {
    alert('last');
   }
 }
 function backward(){
  if ($('.carousel-slider .carousel-item').first().is('.active')) {
    alert('first')
  } else {
    $('.carousel').carousel('prev');
  }
 }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

 <div class="carousel carousel-slider center" data-indicators="true">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>

  <nav>
    <div class="nav-wrapper grey darken-2">
      <ul class="left">
        <li><a onclick="backward()">Back</a></li>
        <li><a onclick="forward();">Next</a></li>
      </ul>
    </div>
  </nav>

最佳答案

我想这就是你想要的，对吧？

$('.carousel').carousel({
  fullWidth: true,
  noWrap:true,
  onCycleTo: checkButtons
});

function forward() {
  $('.carousel').carousel('next');
}

function backward() {
  $('.carousel').carousel('prev');
}

function checkButtons(slide){
  $('.next-button')[
    $(slide).next().is('.carousel-item') ?
      'removeClass' : 'addClass'
  ]('disabled');
  $('.back-button')[
    $(slide).is($('.carousel-slider .carousel-item').first()) ?
      'addClass' : 'removeClass'
  ]('disabled');
}

.nav-wrapper .disabled {
  opacity: .1;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="carousel carousel-slider center" data-indicators="true">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>

  <nav>
    <div class="nav-wrapper grey darken-2">
      <ul class="left">
        <li><a onclick="backward()" class="disabled back-button">Back</a></li>
        <li><a onclick="forward();" class="next-button">Next</a></li>
      </ul>
    </div>
  </nav>

再次更新和简化，感谢Gaby的find:onCycleTo函数。