Использование MaterializeCSS карусели со стрелками - как инициализировать с использованием ванильного JavaScript

Question

Я пытаюсь использовать MaterializeCSS для создания карусели со стрелками. Я пытаюсь использовать этот код с ограниченным успехом. Я хочу реализовать карусель со стрелками, используя ванильный JavaScript, а не jQuery.

Вот мой HTML-код:

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

Вот мой 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);
}

Когда я пытаюсь нажать на стрелку вправо, я получаю сообщение об ошибке «Не удается прочитать свойство next» из undefined. Я пытаюсь следовать документации MaterializeCSS , в которой говорится, что я могу использовать getInstance, а затем вызвать метод. Может кто-нибудь помочь мне?

Answer 1

Вы можете попробовать это, используя onclick для обоих тегов anchor и получив экземпляр carousel и используя next() и 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);
    }
});