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

您需要为按钮设置点击处理程序，以停止传播并在旋转木马元素上执行所需的操作，而不是在按钮元素上执行。

这是一个片段：

.popover('destroy')

以下是Codepen的工作原理：https://codepen.io/zubair1024/pen/mBaEdX

对于导航（以编程方式），请使用以下内容：

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

实现 - 使用轮播功能

1 个答案: