使用带箭头的MaterializeCSS旋转木马-如何使用香草javascript初始化

我正在尝试使用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>

---

当我试图点击我的右箭头时，我得到一个错误，上面写着“无法读取属性”下一个“未定义”。我正试图遵循这样的原则，即我可以使用“getInstance”，然后调用该方法。有人能帮我吗？

你可以在

anchor

标记上使用

onclick

，获取

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>

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

---

非常感谢。当它工作时，它会进入页面顶部。在代码笔中，它们有“e.preventDefault（）。我如何将其传递到我的函数中，使其不会在每次单击时都显示在页面顶部？我试着输入e，但它只是给了我一个错误，说它不能识别“e.preventDefault（）”你能解释一下上面是什么吗？只有其他div有其他内容（两个整页div，然后是我的旋转木马）。当我按下箭头时，页面几乎会刷新。面板仍在移动，但我立即被转移到页面顶部。我必须向下滚动才能再次看到旋转木马。注意：我找到了。这是因为我有href=“#”标记，如果用户单击箭头，它会将用户移动到页面顶部。

@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;
 }

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