Creating a Simple image carousel using JS Array-CodePudding

I created a simple carousel using HTML, CSS, and Javascript.

Clicking the left button shows the previous slide and the right one shows the next slide. But my concern is that slide change is not working correctly when clicking the next button: After the final slide, it won't go to the first slide again. when clicking the previous button: After the first slide, it won't go again to last the slide again.

So please review my code and let me know my error.

let right = document.querySelector('.nxt');
let left = document.querySelector('.pre');

let slids = document.querySelector('.slids');

let first = document.querySelector('.first');
let scond = document.querySelector('.scond');
let third = document.querySelector('.third');
let fouth = document.querySelector('.fouth');



let slidesArray=[first,scond,third,fouth];


let index= 0;

let activeSlide= slidesArray[index].classList.add('active'); 

left.addEventListener('click',()=>{
    
    if (  index > 0) {
              slidesArray[index].classList.add('active'); 
            }  
        });

right.addEventListener('click',()=>{
    if (index > 0) { 
        slidesArray[index].classList.add('deactive');  
        slidesArray[--index].classList.add('active'); 
    }
    });

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

.slids>*{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    width: 400px;
    height: 350px;
    font-size: 50px;
    font-weight: 600;
    display: grid;
    place-items: center;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    visibility: hidden;
}
.active{
    visibility: visible;
}


.first{
    background-color: #F7EC09;
}
.scond{
    background-color: #3EC70B;
}
.third{
    background-color: #3B44F6;
}
.fouth{
    background-color: #A149FA;
}

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    display: flex;
    gap: 450px;        
}
.nxt, .pre{
    font-size: 100px;
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
}

<body>
    <div >
        <div >1</div>
        <div >2</div>
        <div >3</div>
        <div >4</div>
    </div>
    <div >
        <button >&lt;</button>
        <button >&gt;</button>
    </div>

CodePudding user response：

A chained ternary expression can be used to determine the new index number in a single line:

to = to >= size ? 0 : to < 0 ? size - 1 : to;

Details are commented in example

// Reference the buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');

/*
Collect all div.slide into an array
Define the array's size
Define a number value outside of the function
*/
let slides = [...document.querySelectorAll('.slide')];
let size = slides.length;
let index = 0;

// Bind click event to button.prev
prev.onclick = event => move(index - 1);
// Bind click event to button.next
next.onclick = event => move(index   1);

/*
Pass newest index number
Ternary expression:
  If the given number is greater than or equal to size of the array...
  ...return 0...
  ...If the given number is less than 0...
  ...return last index of array...
  ...otherwise return the given number
Toggle the current .slide.active and new .slide
Assign index as the given number
*/
function move(to) {
  to = to >= size ? 0 : to < 0 ? size - 1 : to;
  slides[index].classList.toggle("active");
  slides[to].classList.toggle("active");
  index = to;
}

html {
  font: 300 3vmin/1 Consolas;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: max-content;
  min-height: 100vh;
}

.slides {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 420px;
  height: 400px;
  overflow: hidden;
}

.slide {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 350px;
  border-radius: 20px;
  font-size: 50px;
  font-weight: 600;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  visibility: hidden;
  transform: translate(-50%, -50%);
}

.active {
  visibility: visible;
}

.slide:first-of-type {
  background-color: #F7EC09;
}

.slide:nth-of-type(2) {
  background-color: #3EC70B;
}

.slide:nth-of-type(3) {
  background-color: #3B44F6;
}

.slide:nth-of-type(4) {
  background-color: #A149FA;
}

.ctrl {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 45%;
  left: 45%;
  width: 150%;
  transform: translate(-50%, -50%);
}

.next,
.prev {
  border: none;
  font-size: 100px;
  font-weight: 700;
  background: none;
  cursor: pointer;
}

<main>
  <section >
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
  </section>
  <menu >
    <button >&lt;</button>
    <button >&gt;</button>
  </menu>
</main>

CodePudding user response：

You need to reset the index of the slide when you click next and reach to maximum slide you need to reset index to 0 to return to first slide, also when you click prev and you in the first slide, you need to reset index to 3 to return the last slide.

let right = document.querySelector(".nxt");
let left = document.querySelector(".pre");

let slids = document.querySelector(".slids");

let first = document.querySelector(".first");
let scond = document.querySelector(".scond");
let third = document.querySelector(".third");
let fouth = document.querySelector(".fouth");
const elementsArr = [first, scond, third, fouth];

let slidesArray = [first, scond, third, fouth];

let index = 0;

let activeSlide = slidesArray[index].classList.add("active");

left.addEventListener("click", () => {
    if (index === 3) {
        index = -1;
    }
    index  ;
    resetActiveElements()
});

right.addEventListener("click", () => {
    if (index === 0) index = 4;
    index--;
    
    resetActiveElements()
});

const resetActiveElements = () => {
      elementsArr.forEach((element, i) => {
        if (index === i) {
            element.classList.add("active");
        } else {
            element.classList.remove("active");
        }
    });
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

.slids>*{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    width: 400px;
    height: 350px;
    font-size: 50px;
    font-weight: 600;
    display: grid;
    place-items: center;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    visibility: hidden;
}
.active{
    visibility: visible;
}


.first{
    background-color: #F7EC09;
}
.scond{
    background-color: #3EC70B;
}
.third{
    background-color: #3B44F6;
}
.fouth{
    background-color: #A149FA;
}

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    display: flex;
    gap: 450px;        
}
.nxt, .pre{
    font-size: 100px;
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
}

<body>
    <div >
        <div >1</div>
        <div >2</div>
        <div >3</div>
        <div >4</div>
    </div>
    <div >
        <button >&lt;</button>
        <button >&gt;</button>
    </div>

CodePudding user response：

/* <div >
  <button >&lt;</button>
  <button >&gt;</button>
</div> */

let right = document.querySelector('.nxt');
let left = document.querySelector('.pre');

let slids = document.querySelector('.slids');



let first = document.querySelector('.first');
let scond = document.querySelector('.scond');
let third = document.querySelector('.third');
let fouth = document.querySelector('.fouth');



let slidesArray = [first, scond, third, fouth];


let index = 0;

let activeSlide = slidesArray[index].classList.add('active');

left.addEventListener('click', () => {
    slidesArray[index].classList.remove('active');
    if (index == 0) {
        index = 3;
        slidesArray[index].classList.add('active');
    } else {
        index--;
        slidesArray[index].classList.add('active');
    }

});

right.addEventListener('click', () => {

    slidesArray[index].classList.remove('active');
    if (index == 3) {
        index = 0;
        slidesArray[index].classList.add('active');
    } else {
        index  ;
        slidesArray[index].classList.add('active');
    }

});