Using MaterializeCSS carousel with arrows - how to initialize using vanilla javascript

Question

I am trying to use MaterializeCSS to create a Carousel with arrows. I am trying to use this codepen to limited success. I want to implement a carousel with arrows, using vanilla javascript rather than jQuery.

Here is my HTML Code:

<div class="aboutMeCarousel carousel carousel-slider center">
    <div class="carousel-fixed-item center middle-indicator">
    <div class="left">
        <a class="movePrevCarousel middle-indicator-text waves-effect waves-light content-indicator"><i class="material-arrows left  middle-indicator-text">chevron_left</i></a>
    </div>

    <div class="right" onclick="moveNext()">
        <a class="moveNextCarousel middle-indicator-text waves-effect waves-light content-indicator"><i class="material-arrows right middle-indicator-text">chevron_right</i></a>
    </div>
    </div>
    <div class="carousel-fixed-item center">
        <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
        <h2>First Panel</h2>
        <p class="red-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>

Here is my javascript:

document.addEventListener('DOMContentLoaded', function(){
    var elems = document.querySelectorAll('.carousel.carousel-slider');
    var instance = M.Carousel.init(elems, {
        fullWidth: true,
        indicators: true
    });

});

function moveNext(){
    var elems = document.querySelectorAll('.carousel.carousel-slider');
    var moveRight = M.Carousel.getInstance(elems);
    moveRight.next(1);
}

When I try to click on my right arrow, I get an error that says 'Cannot read property 'next' of undefined'. I am trying to follow the documentation of MaterializeCSS which says that I can use the 'getInstance' and then call the method. Can someone please help me out?

Answer 1

You can try this by using onclick on both the anchor tags and getting the instance of carousel and using next() and prev().

HTML

<div id="carouselContainer" class="container">
    <div class="carousel carousel-slider center " data-indicators="true">
        <div class="carousel-fixed-item center middle-indicator">
            <div class="left">
                <a href="#carouselContainer" onclick="movePrevCarousel()" class="middle-indicator-text waves-effect waves-light content-indicator"><i
                        class="material-icons left  middle-indicator-text">chevron_left</i></a>
            </div>

            <div class="right">
                <a href="#carouselContainer" onclick="moveNextCarousel()" class="middle-indicator-text waves-effect waves-light content-indicator"><i
                        class="material-icons right middle-indicator-text">chevron_right</i></a>
            </div>
        </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>
</div>

CSS

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

.middle-indicator {
    position: absolute;
    top: 50%;
}

.middle-indicator-text {
    font-size: 4.2rem;
}

a.middle-indicator-text {
    color: white !important;
}

.content-indicator {
    width: 64px;
    height: 64px;
    background: none;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.indicators {
    visibility: hidden;
 }

Javascript

 document.addEventListener('DOMContentLoaded', function () {
    var carouselElems = document.querySelector('.carousel.carousel-slider');
        var carouselInstance = M.Carousel.init(carouselElems, {
            fullWidth: true,
            indicators: true
        });
    });
    function moveNextCarousel() {
        var elems = document.querySelector('.carousel.carousel-slider');
        var moveRight = M.Carousel.getInstance(elems);
        moveRight.next(1);
    }
    function movePrevCarousel() {
        var elems = document.querySelector('.carousel.carousel-slider');
        var moveLeft = M.Carousel.getInstance(elems);
        moveLeft.prev(1);
    }
});