问题描述
我正在尝试使用MaterializeCSS创建带有箭头的轮播.我正在尝试使用此Codepen 来获得有限的成功.我想使用香草JavaScript而非jQuery实现带有箭头的轮播.
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.
这是我的HTML代码:
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>
这是我的JavaScript:
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);
}
当我尝试单击向右箭头时,出现错误消息无法读取未定义的属性" next".我正在尝试遵循 MaterializeCSS文档,该文档说我可以使用'getInstance'然后调用方法.有人可以帮我吗?
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?
推荐答案
您可以通过在anchor
标记上同时使用onclick
并获取carousel
的实例并使用next()
和prev()
来尝试此操作
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);
}
});
这篇关于使用带有箭头的MaterializeCSS轮播-如何使用Vanilla JavaScript进行初始化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!