如何在没有JQuery的情况下为Materializecss v1.0.0中的转盘创建自动滚动功能?
当前实现不支持自动滚动或自动播放功能。 有一些调用next和prev的方法,因此必须有一种方法来设置自动滚动轮播。
答案 0 :(得分:2)
我想发布一个我认为其他人会有用的解决方案。在这里,我在materializecss v1.0.0中为转盘创建了自动滚动功能,而无需使用jquery。
我个人认为这是应在Materializecss中默认使用的内容,但由于并非如此,所以我做到了。
您也可以在https://codepen.io/tuffant21/pen/abOKPgO
上查看不胜感激+1:)
window.onload = function() {
initCarousel('.carousel', {
fullWidth: true,
indicators: true,
autoScroll: 6000 // time in ms
});
}
function initCarousel(elms, opts) {
if (!window || !document) return null;
const instances = M.Carousel.init(getElements(elms), opts);
if (Array.isArray(instances)) {
for (let i = 0; i < instances.length; ++i) {
addAutoScroll(instances[i]);
}
} else {
addAutoScroll(instances);
}
return instances;
}
function destroyCarousel(instances) {
if (!window || !document) return null;
if (Array.isArray(instances)) {
for (let i = 0; i < instances.length; ++i) {
removeAutoScroll(instances[i]);
instances[i].destroy();
}
} else {
removeAutoScroll(instances);
instances.destroy();
}
}
function addAutoScroll(instance) {
if (!instance.options.autoScroll) return;
instance.autoScrollIntervalId = window.setInterval(() => {
instance.next();
}, instance.options.autoScroll);
instance.el.addEventListener("mouseover", carouselMouseOverTouchStart, {
passive: true
});
instance.el.addEventListener("mouseleave", carouselMouseOutTouchEnd, {
passive: true
});
instance.el.addEventListener("touchstart", carouselMouseOverTouchStart, {
passive: true
});
instance.el.addEventListener("touchend", carouselMouseOutTouchEnd, {
passive: true
});
}
function removeAutoScroll(instance) {
if (instance.autoScrollIntervalId) {
window.clearInterval(instance.autoScrollIntervalId);
instance.autoScrollIntervalId = undefined;
}
instance.el.removeEventListener("mouseover", carouselMouseOverTouchStart);
instance.el.removeEventListener("mouseleave", carouselMouseOutTouchEnd);
instance.el.removeEventListener("touchstart", carouselMouseOverTouchStart);
instance.el.removeEventListener("touchend", carouselMouseOutTouchEnd);
}
function carouselMouseOverTouchStart() {
const instance = M.Carousel.getInstance(this);
if (!instance) return;
if (instance.autoScrollIntervalId) {
window.clearInterval(instance.autoScrollIntervalId);
instance.autoScrollIntervalId = undefined;
}
}
function carouselMouseOutTouchEnd() {
const instance = M.Carousel.getInstance(this);
if (!instance) return;
if (!instance.autoScrollIntervalId) {
instance.autoScrollIntervalId = window.setInterval(() => {
instance.next();
}, instance.options.autoScroll);
}
}
// if searching for an element by id, insert a # in front of the passed in id
function getElements(elms) {
if (elms.charAt(0) === "#") {
elms = elms.replace("#", "");
return document.getElementById(elms);
}
return document.querySelectorAll(elms);
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Take note of the no-autoinit class -->
<!-- If you want M.AutoInit() to ignore a certain element, you can add the class .no-autoinit to the element and it will not be initialized by autoinit. -->
<div class="container">
<div class="carousel carousel-slider no-autoinit">
<a class="carousel-item"><img src="https://lorempixel.com/800/400/food/1"></a>
<a class="carousel-item"><img src="https://lorempixel.com/800/400/food/2"></a>
<a class="carousel-item"><img src="https://lorempixel.com/800/400/food/3"></a>
<a class="carousel-item"><img src="https://lorempixel.com/800/400/food/4"></a>
</div>
</div>