如何使用 Javascript 将一组幻灯片相互连接到 position？

Question

我正在尝试使用纯香草 javascript 在项目网站页面上创建轮播。 我正在尝试在按钮上添加事件侦听器之前 position 幻灯片，但它似乎不起作用。

这是 HTML

 const carousel = document.querySelector('.container-items'); const slides = [...carousel.children]; const slideWidth = slides[0].getBoundingClientRect().width; const prevButton = document.querySelector('.leftbtn'); const nextButton = document.querySelector('.rightbtn'); //Position slides next to each other function positionSlides(slides){ for (let index = 0; index < slides.length; index++) { slides[index].style.left = slideWidth * index+ 'px'; } } positionSlides(slides);

 .explore-section__container{ position: relative; }.explore-section__container-items{ position: relative; }.container-items{ list-style: none; }.explore-image{ height: 150px; width: 150px; padding: 0; border-radius: 100%; position: absolute; left: 45%; top: 10%; }.btn{ position: absolute; }.leftbtn{ left: 38%; }.rightbtn{ right: 38%; }

 <div class = "explore-section__container"> <div class = "explore-section__container-items"> <button class = "btn leftbtn">leftbtn</button> <ul class = "container-items"> <li> <img class = "explore-image active" src="images/conference.jpg" alt=""> </li> <li> <img class = "explore-image" src="images/food.jpg" alt=""> </li> <li> <img class = "explore-image" src="images/gym.jpg" alt=""> </li> </ul> <button class = "btn rightbtn">rightbtn</button> </div> </div>

我还没有为事件监听器编写代码。 我想让元素首先彼此相邻。

Answer 1

您不需要使用 javascript 来执行此操作，它是 CSS/HTML 的东西，javascript 在这样的事情中的作用是滑动和动画<li> HTML 标签，有很多方法可以实现你想要的例子：

 .explore-section__container{ position: relative; }.explore-section__container-items{ position: relative; }.container-items{ list-style: none; width: 480px; overflow: hidden; float:left; padding: 0; margin: 0; }.container-items li { float:left; display:inline-block; width: 150px; margin-right: 10px; }.explore-image{ height: 150px; width: 150px; padding: 0; }.btn{ float:left; margin: 60px 10px; }

 <div class = "explore-section__container"> <div class = "explore-section__container-items"> <button class = "btn leftbtn"><</button> <ul class = "container-items"> <li> <img class = "explore-image active" src="https://via.placeholder.com/300.png" alt=""> </li> <li> <img class = "explore-image" src="https://via.placeholder.com/300.png" alt=""> </li> <li> <img class = "explore-image" src="https://via.placeholder.com/300.png" alt=""> </li> </ul> <button class = "btn rightbtn">></button> </div> </div>