-
Notifications
You must be signed in to change notification settings - Fork 0
/
carousel.js
78 lines (68 loc) · 3.03 KB
/
carousel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
const track = document.querySelector('.carouselTrack');
const slides = Array.from(track.children);
const nextButton = document.querySelector('.carouselButton--right');
const prevButton = document.querySelector('.carouselButton--left');
const dotsNav = document.querySelector('.carouselNav');
const dots = Array.from(dotsNav.children);
const slideWidth = slides[0].getBoundingClientRect().width;
//arrange the slides next to one another
const setSlidePosition = (slide, index) => {
slide.style.left = (slideWidth+1) * index + 'px';
}
slides.forEach(setSlidePosition);
const moveToSlide = (track, currentSlide, targetSlide) => {
track.style.transform = 'translateX(-' + targetSlide.style.left + ')';
currentSlide.classList.remove('currentSlide');
targetSlide.classList.add('currentSlide');
}
const updateDots = (currentDot, targetDot) => {
currentDot.classList.remove('currentSlide');
targetDot.classList.add('currentSlide');
}
const hideShowArrows = (slides, prevButton, nextButton, targetIndex) => {
if(targetIndex ===0){
prevButton.classList.add('is-hidden');
nextButton.classList.remove('is-hidden');
} else if (targetIndex === slides.length-1){
prevButton.classList.remove('is-hidden');
nextButton.classList.add('is-hidden');
} else {
prevButton.classList.remove('is-hidden');
nextButton.classList.remove('is-hidden');
}
}
//when click left, slides left
prevButton.addEventListener('click', e => {
const currentSlide = track.querySelector('.currentSlide');
const prevSlide = currentSlide.previousElementSibling;
const currentDot = dotsNav.querySelector('.currentSlide');
const prevDot = currentDot.previousElementSibling;
const prevIndex = slides.findIndex(slide => slide===prevSlide);
moveToSlide(track, currentSlide, prevSlide);
updateDots(currentDot, prevDot);
hideShowArrows(slides, prevButton, nextButton, prevIndex);
});
//when click right, slides right
nextButton.addEventListener('click', e => {
const currentSlide = track.querySelector('.currentSlide');
const nextSlide = currentSlide.nextElementSibling;
const currentDot = dotsNav.querySelector('.currentSlide');
console.log(dotsNav.querySelector('.currentSlide'));
const nextDot = currentDot.nextElementSibling;
const nextIndex = slides.findIndex(slide => slide===nextSlide);
moveToSlide(track, currentSlide, nextSlide);
updateDots(currentDot, nextDot);
hideShowArrows(slides, prevButton, nextButton, nextIndex);
});
//when click nav indicators, move to that slide
dotsNav.addEventListener('click', e => {
const targetDot = e.target.closest('button');
if(!targetDot) return;
const currentSlide = track.querySelector('.currentSlide');
const currentDot = dotsNav.querySelector('.currentSlide');
const targetIndex = dots.findIndex(dot => dot ===targetDot);
const targetSlide = slides[targetIndex];
moveToSlide(track, currentSlide, targetSlide);
updateDots(currentDot, targetDot);
hideShowArrows(slides, prevButton, nextButton, targetIndex);
});