CODEWITHSUNDEEP
javascripthtmlcarousel
Ravi
Ravi

Reputation: 93

Creating a Simple image carousel using JS Array

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 class="slids">
        <div class="first">1</div>
        <div class="scond">2</div>
        <div class="third">3</div>
        <div class="fouth">4</div>
    </div>
    <div class="btn">
        <button class="nxt">&lt;</button>
        <button class="pre">&gt;</button>
    </div>

Upvotes: 0

Views: 718

Answers (3)

zer00ne
zer00ne

Reputation: 43880

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 class="slides">
    <div class="slide active">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
    <div class="slide">4</div>
  </section>
  <menu class="ctrl">
    <button class="prev">&lt;</button>
    <button class="next">&gt;</button>
  </menu>
</main>

Upvotes: 1

Dharmik Gohil
Dharmik Gohil

Reputation: 31

/* <div class="btn">
  <button class="pre">&lt;</button>
  <button class="nxt">&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');
    }

});

Upvotes: 0

Mina
Mina

Reputation: 17149

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 class="slids">
        <div class="first">1</div>
        <div class="scond">2</div>
        <div class="third">3</div>
        <div class="fouth">4</div>
    </div>
    <div class="btn">
        <button class="nxt">&lt;</button>
        <button class="pre">&gt;</button>
    </div>

Upvotes: 0

Related Questions