[英]Using MaterializeCSS carousel with arrows - how to initialize using vanilla javascript
I am trying to use MaterializeCSS to create a Carousel with arrows. 我正在尝试使用MaterializeCSS创建带有箭头的轮播。 I am trying to use this codepen to limited success. 我正在尝试使用此Codepen来获得有限的成功。 I want to implement a carousel with arrows, using vanilla javascript rather than jQuery. 我想使用香草JavaScript而非jQuery实现带有箭头的轮播。
Here is my HTML Code: 这是我的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>
Here is my javascript: 这是我的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'. 当我尝试单击向右箭头时,出现错误消息“无法读取未定义的属性” next”。 I am trying to follow the documentation of MaterializeCSS which says that I can use the 'getInstance' and then call the method. 我正在尝试遵循MaterializeCSS的文档,该文档说我可以使用“ getInstance”,然后调用该方法。 Can someone please help me out? 有人可以帮我吗?
You can try this by using onclick
on both the anchor
tags and getting the instance of carousel
and using next()
and prev()
. 您可以通过在两个anchor
标签上同时使用onclick
并获取carousel
的实例并使用next()
和prev()
来进行尝试。
HTML 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 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 使用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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.