javascript - 我的 JS/CSS 滑块在第一张幻灯片后停止工作。我该如何解决这个问题?
问题描述
我刚刚在 CSS 和 JS 中制作了一个滑块,我遇到了一个问题:在第一次滑动之后,滑块停止并且我无法单击按钮。我尝试了很多东西,我更改了每个元素的幻灯片宽度、z-index 甚至脚本的某些部分,但似乎没有任何效果。它似乎仅适用于 Firefox,但不适用于 chrome。
document.addEventListener('DOMContentLoaded', () => {
const SLIDETIME = 500; //ms
// --------------------------
const backButton = document.querySelector('.wbn-slider-back-btn');
const forwardButton = document.querySelector('.wbn-slider-next-btn');
// Select all slides and convert node to array for easy handling
const allSlides = Array.from(document.querySelectorAll('.wbn-slide'));
//const allSlides = [...document.querySelectorAll('.wbn-slide')];
let clickable = true;
let active = null;
let newActive = null;
function initSlider() {
// Set the CSS transition on the slides to the value we specified in SLIDETIME above
allSlides.forEach(slide =>
slide.setAttribute(
'style',
`transition: transform ${SLIDETIME}ms ease;
animation-duration: ${SLIDETIME}ms`,
),
);
}
function changeSlide(forward) {
if (clickable) {
clickable = false;
active = document.querySelector('.active');
const activeSlideIndex = allSlides.indexOf(active);
if (forward) {
console.log('activeSlideIndex: ', activeSlideIndex);
console.log('allSlides.length: ', allSlides.length);
console.log('new slide: ', (activeSlideIndex + 1) % allSlides.length);
newActive = allSlides[(activeSlideIndex + 1) % allSlides.length];
active.classList.add('slideOutLeft');
newActive.classList.add('slideInRight', 'active');
} else {
console.log('activeSlideIndex: ', activeSlideIndex);
console.log('allSlides.length: ', allSlides.length);
console.log('new slide: ', (activeSlideIndex - 1 + allSlides.length) % allSlides.length);
newActive =
allSlides[
(activeSlideIndex - 1 + allSlides.length) % allSlides.length
];
active.classList.add('slideOutRight');
newActive.classList.add('slideInLeft', 'active');
}
}
}
allSlides.forEach(slide => {
slide.addEventListener('transitionend', e => {
// Check for the old active transition and if clickable is false
// to not trigger it more than once
if (slide === active && !clickable) {
clickable = true;
// Remove all CSS animation classes on old active
active.className = 'wbn-slide';
}
});
});
//Event listeners
forwardButton.addEventListener('click', () => {
changeSlide(true);
});
backButton.addEventListener('click', () => {
changeSlide(false);
});
// Init the slider
initSlider();
}); 这是我正在使用的 JS 代码,以下是 CSS:
.slider-team{
flex-shrink: 0;
overflow: hidden;
width: 39.41667vw ;
height: 39.58333vw;
}
.wbn-slide {
position: absolute;
z-index: 500;
}
.wbn-slide img {
object-fit: cover;
pointer-events: none;
}
.slideInLeft {
animation-name: animateInLeft;
z-index: 800;
}
.slideInRight {
animation-name: animateInRight;
z-index: 800;
}
.slideOutLeft {
transform: translateX(-0%);
}
.slideOutRight {
transform: translateX(0%);
}
@keyframes animateInLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
@keyframes animateInRight {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
.active{
z-index: 1000;
}
.wbn-overlay-text {
text-align: center;
position: absolute;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: white;
top: 0;
left: 0;
z-index: 10000;
opacity: 1;
}
.wbn-overlay-text .wbn-header {
font-family: 'Italiana', serif;
font-size: 80px;
font-weight: 400;
}
.wbn-overlay-text .wbn-text {
text-align: center;
font-size: 22px;
font-weight: 600;
line-height: 30px;
color: white;
max-width: 30%;
}
.wbn-buttons {
position: absolute;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
width: 48%;
height: 100%;
z-index: 20000 !important;
}
.wbn-slider-back-btn,
.wbn-slider-next-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
font-size: 20px;
opacity: 0.7;
border-radius: 50px;
width: 50px;
height: 50px;
transition: all 0.2s;
margin: 20px;
}
.wbn-slider-back-btn:hover,
.wbn-slider-next-btn:hover {
transform: scale(1.1);
opacity: 0.8;
}
这是 HTML 代码:
<div class="slider-team">
<div class="wbn-slide">
<img src=<?php echo get_template_directory_uri(). '/img/slide1.jpg'?> alt="">
<div class="wbn-overlay-text">
<span class="wbn-header">BEATRICE <br>BORELLINI</span>
<span class="wbn-text">ART DIRECTOR</span>
</div>
</div>
<div class="wbn-slide">
<img src=<?php echo get_template_directory_uri(). '/img/slide2.jpg'?> alt="">
<div class="wbn-overlay-text">
<span class="wbn-header">NICCOLO' <br> BIANCHI</span>
<span class="wbn-text">CEO & WEB DESIGNER</span>
</div>
</div>
<div class="wbn-slide active"><img src=<?php echo get_template_directory_uri(). '/img/slide3.jpg'?> alt="">
<div class="wbn-overlay-text">
<span class="wbn-header">PAOLA <br> MAZZONI</span>
<span class="wbn-text">CEO</span>
</div>
</div>
<div class="wbn-buttons">
<div class="wbn-slider-back-btn">
<span><img src=<?php echo get_template_directory_uri(). '/img/Freccia.png'?> alt=""> </span>
</div>
<div class="wbn-slider-next-btn">
<span><img src=<?php echo get_template_directory_uri(). '/img/Freccia.png'?> alt=""> </span>
</div>
</div>
解决方案
在代码执行的每一步之后使用console.log/alert,你会得到它卡住的地方,在小提琴它不起作用,
推荐阅读
- mips - 这种多周期 MIPS 能否避免新 PC 值的多路复用?
- twitter-bootstrap-3 - 如何防止引导程序在手机屏幕尺寸下“掉线”?
- css - 无法导入css houdini paint js文件
- jakarta-ee - @Singleton EJB 中的多个计时器抛出 javax.ejb.ConcurrentAccessTimeoutException
- tailwind-css - 如何使用 Tailwind CSS 不重叠组件?
- codeigniter - 自定义基本 URL Codeigniter
- c - 将输入附加到链表而不再次获得相同的输入 - C
- javascript - 在 Safari 中打印时我的页面显示为空白
- c - 致命错误:linux/mount.h:没有这样的文件或目录
- c++ - 如何使用 C++11 中的可变参数非类型模板参数解决此问题?