材料カルーセルで戻るボタンを隠す

Question

私は最初のスライドで戻るボタンを隠す必要がある重要なCSSのカルーセルを持っています。私は私が何をしたい、これがあると仮定しています以下のコードはループ

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

からユーザーを停止しますポストからbewloコードで

を試してみました、 右？ onCycleTo機能：

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

• は、ギャビーの発見のおかげで更新し、再び簡素化。

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>