隐藏材料转盘中的后退按钮

Question

我有一个素材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>

Answer 1

我假设这是你想要的，对吗？

$('.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的发现：onCycleTo功能。

Answer 2

您可以使用onCycleTo事件，只要您转到转盘中的幻灯片（，无论您何时到达），都会触发

非正式记录，但已在https://github.com/Dogfalo/materialize/issues/4069

中正式添加并非正式记录

$('.carousel').carousel({
  fullWidth: true,
  noWrap: true,
  onCycleTo: function(currentSlide){
    var index = currentSlide.index('.carousel-item'),
        slideCount = currentSlide.prevObject.length;

    $('.nav-wrapper').toggleClass('at-first', index === 0);
    $('.nav-wrapper').toggleClass('at-last', index === slideCount-1);
  }
});

$('.nav-wrapper').on('click', 'a[data-direction]', function(e){
  e.preventDefault();
  var direction = $(this).data('direction'),
      nextInDirection = $('.carousel-item.active')[direction]('.carousel-item');

  if (nextInDirection.length){
    $('.carousel').carousel(direction);
  }
});

.nav-wrapper.at-first a[data-direction="prev"],
.nav-wrapper.at-last a[data-direction="next"] {
  opacity:0.2;
  cursor:not-allowed;
}

<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 data-direction="prev">Back</a></li>
      <li><a data-direction="next">Next</a></li>
    </ul>
  </div>
</nav>