How to move child elements in carousel?

Question

I'm making a simple JS slider and I want to change the order of the images when I click on the prev/next button:

<div id="slider-container">
  <div class="btn" id="prevBtn">
    <i class="arrow arrowLeft"></i>
  </div>
  <div class="multiple-items">
    <div>
      <img class="carousel-img" src="assets/carousel/img1.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img2.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img3.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img4.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img5.png">
    </div>
  </div>
  <div class="btn" id="nextBtn">
    <i class="arrow arrowRight"></i>
  </div>
</div>

I want to switch img2 with img1 and img1 goes to the img5 place.

JS code, added listeners to buttons:

prevBtn.addEventListener('click', () => {
if (i > 1) {
    i--
} else {
    i = 5;
}
});

nextBtn.addEventListener('click', () => {
    if (i < 5) {
        i++
    } else {
        i = 1;
    }
})

By *"switch"* you mean to **animate** your carousel? If yes, why did you not mentioned it? Please read [ask]. [edit] with a [mcve] of your best try. There's lack of obvious things like mentioning if the carousel should stop at the last slide or be infinite (I suppose), how to handle the buttons etc — Roko C. Buljan, Jan 29 '23 at 17:36
I just forgot to add js code, I have a long time not coded, so I forgot a lot things, I think it can be done with js methods, but cant realize how to do that. — JOKER, Jan 29 '23 at 17:37
Semantics any accessibility matter, don't use `
` when you actually need ` — Roko C. Buljan, Jan 29 '23 at 17:45
My english level is not too high, so bcs of that my question is not that easy to understand — JOKER, Jan 29 '23 at 18:49

Rory McCrossan · Answer 1 · 2023-01-30T08:52:45.823

To do what you require you can select the :first-child/:last-child div elements and append()/prepend() them within their respective container:

const carousel = document.querySelector('.multiple-items');

document.querySelector('#prevBtn').addEventListener('click', () => {
  const last = carousel.querySelector('div:last-child');
  carousel.prepend(last);
});

document.querySelector('#nextBtn').addEventListener('click', () => {
  const first = carousel.querySelector('div:first-child');
  carousel.append(first);
});

.multiple-items > div {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #CCC;
}

<div id="slider-container">
  <div class="btn" id="prevBtn">
    <i class="arrow arrowLeft">Prev</i>
  </div>
  <div class="multiple-items">
    <div>
      <img class="carousel-img" src="assets/carousel/img1.png" alt="img1" />
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img2.png" alt="img2" />
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img3.png" alt="img3" />
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img4.png" alt="img4" />
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img5.png" alt="img5" />
    </div>
  </div>
  <div class="btn" id="nextBtn">
    <i class="arrow arrowRight">Next</i>
  </div>
</div>

Could be me, but looks like you reversed _next_ and _Prev_, lol — icecub, Jan 29 '23 at 17:49

Roko C. Buljan · Answer 2 · 2023-01-29T23:52:06.557

Don't use IDs. You're limiting yourself to not being able to reuse your component inside a page. Use classes instead and have as many carousels as you desire
Use <button> instead of <div>
Use a live HTMLCollection by using Element.children
Use .append() and .prepend() Element methods
Use a more consistent CSS naming convention

document.querySelectorAll('.slider').forEach((elSlider) => {

  const elItems = elSlider.querySelector(".slider-items");
  const slides = elItems.children;

  elSlider.querySelector(".slider-btn.prev").addEventListener("click", () => {
    elItems.prepend(slides[slides.length - 1]);
  });

  elSlider.querySelector(".slider-btn.next").addEventListener("click", () => {
    elItems.append(slides[0]);
  });

});

.slider-items {
  display: flex;
}

<div class="slider">
  <div class="slider-items">
    <div><img src="//via.placeholder.com/100x100/0bf?text=1" alt="img1"></div>
    <div><img src="//via.placeholder.com/100x100/fb0?text=2" alt="img2"></div>
    <div><img src="//via.placeholder.com/100x100/f0b?text=3" alt="img3"></div>
    <div><img src="//via.placeholder.com/100x100/bf0?text=4" alt="img4"></div>
    <div><img src="//via.placeholder.com/100x100/b0f?text=5" alt="img5"></div>
  </div>
  <button type="button" class="slider-btn prev" aria-label="previous">&larr;</button>
  <button type="button" class="slider-btn next" aria-label="next">&rarr;</button>
</div>

<div class="slider">
  <div class="slider-items">
    <div><img src="//via.placeholder.com/100x100/222?text=1" alt="img1"></div>
    <div><img src="//via.placeholder.com/100x100/444?text=2" alt="img2"></div>
    <div><img src="//via.placeholder.com/100x100/666?text=3" alt="img3"></div>
    <div><img src="//via.placeholder.com/100x100/888?text=4" alt="img4"></div>
    <div><img src="//via.placeholder.com/100x100/ccc?text=5" alt="img5"></div>
  </div>
  <button type="button" class="slider-btn prev" aria-label="previous">&larr;</button>
  <button type="button" class="slider-btn next" aria-label="next">&rarr;</button>
</div>

Thanks to the live HTMLCollection, with the example above you can also add or remove slides dynamically; the script will still work as expected.

What is still missing in the above is a better UI/UX. In the real world things do not teleport; users are used to cognitively perceive motion through animation. But that's another question.

How to move child elements in carousel?

2 Answers2