實現-使用輪播功能

Question

我只想使用Materialize的輪播，並具有以下功能：我想在全寬度上使用它，並帶有導航按鈕和特殊的固定項目選項。

但是導航按鈕不起作用。 這是我用來測試的代碼！

 $(document).ready(function(){ $('.carousel').carousel(); }); $('.carousel.carousel-slider').carousel({fullWidth: true}); $('.slide-prev').carousel('prev'); $('.slide-next').carousel('next'); 

 <script 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> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/> <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 slide-prev">Prev</a> <a class="btn waves-effect white grey-text darken-text-2">Share</a> <a class="btn waves-effect white grey-text darken-text-2 slide-next">Next</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> 

怎么了 謝謝您的幫助！ 〜W〜

Answer 1

您將需要按鈕的單擊處理程序，以停止傳播並在輪播元素上執行所需的操作，而不是在按鈕元素上執行該操作。

這是一個片段：

    $(document).ready(function () {
    $('.carousel').carousel();
    $('.carousel.carousel-slider').carousel({ fullWidth: true });
    $('.slide-prev').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        $('.carousel').carousel('prev')
    });
    $('.slide-next').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        $('.carousel').carousel('next')
    });
});

這是一個Codepen可以看到它的工作原理： https ://codepen.io/zubair1024/pen/mBaEdX

對於導航（以編程方式），請使用以下命令：

 //this is for navigation using a new tab
        $('.share-btn').click(function (e) {
            var win = window.open('http://google.com', '_blank');
            win.focus();
        });