Javascript 旋转木马滑块赢得'；他没有像预期的那样滑倒_Javascript_Html_Css

Javascript 旋转木马滑块赢得'；他没有像预期的那样滑倒

javascript html css

Javascript 旋转木马滑块赢得'；他没有像预期的那样滑倒,javascript,html,css,Javascript,Html,Css,我目前正在尝试用html和js创建旋转木马。我的代码似乎是正确的，但由于某些原因，图片无法滑动。我错过什么了吗？我可以补充什么？代码如下： HTML: CSS: 您的旋转木马有两个问题您将translateX写成translateX carouselImages[0]。clientWidth最初为0，由于您已将其分配给一个常量变量，因此它保持为0，因此每次单击上一个/下一个按钮时，都会将计数器与0相乘只需将（-size*counter）更改为（-carouselImages[0].clie

我目前正在尝试用html和js创建旋转木马。我的代码似乎是正确的，但由于某些原因，图片无法滑动。我错过什么了吗？我可以补充什么？代码如下：

HTML:

CSS:

您的旋转木马有两个问题

您将

translateX

写成

translateX

carouselImages[0]。clientWidth

最初为

，由于您已将其分配给一个常量变量，因此它保持为

，因此每次单击上一个/下一个按钮时，都会将

计数器

与

相乘

只需将

（-size*counter）

更改为

（-carouselImages[0].clientWidth*counter）

，您的旋转木马就会正常工作

检查并运行以下代码片段，以获取具有上述更改的转盘的实际示例：

const carouselSlide=document.querySelector（“.carousel slide”）；
const carouselImages=document.queryselectoral（'.carousel slide img'）；
const prevBtn=document.querySelector（“#prevBtn”）；
const nextBtn=document.querySelector（'#nextBtn'）；
设计数器=1；
carouselSlide.style.transform='translateX（+（-carouselImages[0].clientWidth*counter）+'px'）；
nextBtn.addEventListener（'单击'，（）=>{
carouselSlide.style.transition=“转换0.6s轻松输入输出”；
计数器++；
carouselSlide.style.transform='translateX（+（-carouselImages[0].clientWidth*counter）+'px'）；
});
prevBtn.addEventListener（'单击'，（）=>{
carouselSlide.style.transition=“转换0.4s轻松输入输出”；
计数器--；
carouselSlide.style.transform='translateX（+（-carouselImages[0].clientWidth*counter）+'px'）；
});
.carousel容器{宽度：70%；边距：自动；边框：5px纯白；溢出：隐藏；}
.carousel幻灯片{显示：柔性；宽度：100%；高度：500px；}

上
下一步请发布CSS的相关代码片段。有控制台错误吗？@AndrewL64我认为这不是必需的，但这是相关的CSS代码：。旋转木马容器{宽度：70%；边距：自动；边框：5px纯白；溢出：隐藏；}。旋转木马幻灯片{显示：flex；宽度：100%；高度：500px；}@伊舍伍德。不，没有任何控制台错误。我甚至尝试了console.log（计数器），计数器工作正常。由于某种原因，这种转变不起作用，就像一种魅力。我现在不得不接受这样一个事实：我花了一个小时查看代码，却没有注意到“tranlate”。
<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>

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)';
});

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