Materialize - 使用轮播功能

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

您需要有用于停止传播并在轮播元素上执行所需操作的按钮的点击处理程序，而不是在按钮元素上执行它。

这是一个sn-p：

    $(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();
        });