Как мне расположить набор слайдов друг с другом, используя Javascript?

Question

Я пытаюсь создать карусель на странице сайта проекта, используя чистый ваниль javascript. Я пытаюсь расположить слайды перед добавлением прослушивателей событий на кнопках, но это не похоже на работу.

Это 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>