隐藏材质旋转木马中的后退按钮

我有一个材质的CSS旋转木马，我需要在第一张幻灯片中隐藏后退按钮。我曾尝试与bewlo代码后隐藏材质旋转木马中的后退按钮

下面的代码将循环停止用户

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

来源

2017-11-25 Code Guy

请记住，由于旋转木马可以通过鼠标拖动进行滚动，因此它将与您的自定义按钮不同步。 –

@ GabyakaG.Petrioli，更新的解决方案，独立于触发幻灯片更改的解决方案。不幸的是，materializecss没有幻灯片更改前和幻灯片更改事件后，所以我不得不即兴。 –

@AndreiGheorghiu得到了我的投票，但我也刚刚发布了一个解决方案，使用'半环绕的'onCycleTo'事件（* in github issues *） –

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

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

更新和再次简化，由于盖比的发现：onCycleTo功能。

来源

2017-11-25 11:09:43

可以使用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>

来源

2017-11-25 20:10:36

隐藏材质旋转木马中的后退按钮

回答

相关问题