CODEWITHSUNDEEP
javascriptjquerycssmaterialize
Blup
Blup

Reputation: 3

Materialize - Using Carousel functionalities

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~

Upvotes: 0

Views: 982

Answers (1)

zubair1024
zubair1024

Reputation: 853

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

Upvotes: 1

Related Questions