旋转木马 slider 不会按预期滑动

Question

I am currently attempting to create a carousel in html and js.我目前正在尝试在 html 和 js 中创建轮播。 My code appears to be correct but for some reason the pictures do not slide.我的代码似乎是正确的，但由于某种原因，图片没有滑动。 Am I missing something?我错过了什么吗？ What could I add?我能补充什么？ Here is the code:这是代码：

HTML: HTML：

<body>
<div class="carousel-container">
    <div class="carousel-slide">
        <img src="./img/artpic3.jpg" id="lastClone" alt="">
        <img src="./img/artpic1.jpg" alt="">
        <img src="./img/artpic2.jpg" alt="">
        <img src="./img/artpic3.jpg" alt="">
        <img src="./img/artpic1.jpg" id="firstClone" alt="">
    </div>
</div>


<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>

<script src="app.js"></script>

JavaScript: JavaScript：

const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');


const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');


let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'tranlateX(' + (-size * counter) + 'px)';


nextBtn.addEventListener('click', () => {
carouselSlide.style.transition = "transform 0.6s ease-in-out";
counter++;
carouselSlide.style.transform = 'tranlateX(' + (-size * counter) + 'px)';
});
prevBtn.addEventListener('click', () => {
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
carouselSlide.style.transform = 'tranlateX(' + (-size * counter) + 'px)';
});

CSS: CSS：

.carousel-container { 
    width: 70%; margin: auto; border: 5px solid white; overflow: hidden;
}
.carousel-slide {
    display: flex; width: 100%; height: 500px;
}

Answer 1

There are two problems with your carousel.你的轮播有两个问题。

You wrote translateX as tranlateX .您将translateX写为tranlateX 。
carouselImages[0].clientWidth is initially 0 and since you have assigned it to a constant variable, it remains 0 and thus, keeps multiplying the counter with 0 every time the prev/next buttons are clicked. carouselImages[0].clientWidth最初为0 ，并且由于您已将其分配给常量变量，因此它保持0 ，因此每次单击 prev/next 按钮时都会将counter与0相乘。

Just change (-size * counter) to (-carouselImages[0].clientWidth * counter) and your carousel should work fine.只需将(-size * counter)更改为(-carouselImages[0].clientWidth * counter) ，您的轮播就可以正常工作了。

Check and run the following Code Snippet for a practical example of the carousel with the above changes:检查并运行以下代码片段，以获取具有上述更改的轮播的实际示例：

 const carouselSlide = document.querySelector('.carousel-slide'); const carouselImages = document.querySelectorAll('.carousel-slide img'); const prevBtn = document.querySelector('#prevBtn'); const nextBtn = document.querySelector('#nextBtn'); let counter = 1; carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)'; nextBtn.addEventListener('click', () => { carouselSlide.style.transition = "transform 0.6s ease-in-out"; counter++; carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)'; }); prevBtn.addEventListener('click', () => { carouselSlide.style.transition = "transform 0.4s ease-in-out"; counter--; carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)'; });

 .carousel-container { width: 70%; margin: auto; border: 5px solid white; overflow: hidden; }.carousel-slide { display: flex; width: 100%; height: 500px; }

 <div class="carousel-container"> <div class="carousel-slide"> <img src="https://picsum.photos/1420/550?random=1" id="lastClone" alt=""> <img src="https://picsum.photos/1420/550?random=2" alt=""> <img src="https://picsum.photos/1420/550?random=3" alt=""> <img src="https://picsum.photos/1420/550?random=4" alt=""> <img src="https://picsum.photos/1420/550?random=5" alt=""> <img src="https://picsum.photos/1420/550?random=6" alt=""> <img src="https://picsum.photos/1420/550?random=7" alt=""> <img src="https://picsum.photos/1420/550?random=1" alt=""> </div> </div> <button id="prevBtn">Prev</button> <button id="nextBtn">Next</button>

旋转木马 slider 不会按预期滑动

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-17 20:53:38

旋转木马 slider 不会按预期滑动

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-17 20:53:38

解决方案1
1 已采纳 2020-06-17 20:53:38