实现-使用轮播功能

Question

I just want to use the carousel from Materialize with the following features : I want to use it on full width, with navigations buttons and the specials fixed-item option.

But the navigations buttons doesn't work. Here is the code I used to test that!

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

What's wrong here? Thank you for your help! ~W~

Answer 1

You'll need have click handlers for the buttons which stop the propagation and perform the needed operation on the carousel element, instead of performing it on the button element.

Here is a snippet:

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

Here is a Codepen to see it work: https://codepen.io/zubair1024/pen/mBaEdX

For navigation (programmatically) use the following:

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