Scribd
Upload
14 views1 page

Javascript

The document contains JavaScript code for a carousel component that allows users to navigate through items using 'next' and 'prev' buttons. It automatically advances to the next item after a specified interval and updates the display accordingly. The code manages the DOM elements related to the carousel and handles the transitions between items.

Uploaded by

nitinnaresh08062011
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views1 page

Javascript

The document contains JavaScript code for a carousel component that allows users to navigate through items using 'next' and 'prev' buttons. It automatically advances to the next item after a specified interval and updates the display accordingly. The code manages the DOM elements related to the carousel and handles the transitions between items.

Uploaded by

nitinnaresh08062011
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

//step 1: get DOM

let nextDom = document.getElementById('next');


let prevDom = document.getElementById('prev');

let carouselDom = document.querySelector('.carousel');


let SliderDom = carouselDom.querySelector('.carousel .list');
let thumbnailBorderDom = document.querySelector('.carousel .thumbnail');
let thumbnailItemsDom = thumbnailBorderDom.querySelectorAll('.item');
let timeDom = document.querySelector('.carousel .time');

thumbnailBorderDom.appendChild(thumbnailItemsDom[0]);
let timeRunning = 3000;
let timeAutoNext = 7000;

nextDom.onclick = function(){
showSlider('next');
}

prevDom.onclick = function(){
showSlider('prev');
}
let runTimeOut;
let runNextAuto = setTimeout(() => {
next.click();
}, timeAutoNext)
function showSlider(type){
let SliderItemsDom = SliderDom.querySelectorAll('.carousel .list .item');
let thumbnailItemsDom =
document.querySelectorAll('.carousel .thumbnail .item');

if(type === 'next'){


SliderDom.appendChild(SliderItemsDom[0]);
thumbnailBorderDom.appendChild(thumbnailItemsDom[0]);
carouselDom.classList.add('next');
}else{
SliderDom.prepend(SliderItemsDom[SliderItemsDom.length - 1]);
thumbnailBorderDom.prepend(thumbnailItemsDom[thumbnailItemsDom.length -
1]);
carouselDom.classList.add('prev');
}
clearTimeout(runTimeOut);
runTimeOut = setTimeout(() => {
carouselDom.classList.remove('next');
carouselDom.classList.remove('prev');
}, timeRunning);

clearTimeout(runNextAuto);
runNextAuto = setTimeout(() => {
next.click();
}, timeAutoNext)
}

You might also like