[英]How can I make the slider go back to the first slide after reaching the last slide and vice versa
[英]My JS/CSS Slider stops working after the first slide. How can i solve this?
我剛剛在 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,你會發現它卡住的地方,在小提琴它不起作用,
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.