├── README.md
├── carousel.js
├── img
├── left-arrow.svg
├── picture1.jpg
├── picture2.jpg
├── picture3.jpg
└── right-arrow.svg
├── index.html
├── starter template
├── carousel.js
├── img
│ ├── left-arrow.svg
│ ├── picture1.jpg
│ ├── picture2.jpg
│ ├── picture3.jpg
│ └── right-arrow.svg
├── index.html
└── style.css
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Carousel-JavaScript
2 | Carousel in JavaScript
3 |
--------------------------------------------------------------------------------
/carousel.js:
--------------------------------------------------------------------------------
1 | // SELECT CAROUSEL
2 | const carousel = document.querySelector(".carousel");
3 |
4 | // SELECT NEXT BUTTON
5 | const nextButton = document.querySelector(".right-btn");
6 |
7 | // SELECT LEFT BUTTON
8 | const previousButton = document.querySelector(".left-btn");
9 |
10 | // SELECT THE NAV
11 | const nav = document.querySelector(".nav");
12 |
13 | // SELECT ALL THE DOTS
14 | const dots = [...nav.children];
15 |
16 | // SELECT ALL THE SLIDES INSIDE THE CAROUSEL
17 | const slides = [...carousel.children];
18 |
19 | // CALCULATE THE SLIDE WIDTH
20 | let slideWidth = slides[0].getBoundingClientRect().width;
21 |
22 | // POSITION THE SLIDES HORIZONTALY
23 | function positionSlides(slides){
24 | for(let index = 0; index < slides.length; index++){
25 | slides[index].style.left = slideWidth * index + "px";
26 | }
27 | }
28 |
29 | positionSlides(slides);
30 |
31 | // ON RIGHT BUTTON CLICK, WE MOVE(TranslateX) THE CAROUSEL TO THE LEFT
32 | nextButton.addEventListener("click", function(){
33 | const currentSlide = carousel.querySelector(".active");
34 | const nextSlide = currentSlide.nextElementSibling;
35 |
36 | moveToSlide(carousel, currentSlide, nextSlide);
37 | hideButton(nextSlide, slides);
38 | moveToDot(nextSlide, slides, nav, dots);
39 | });
40 |
41 | // ON LEFT BUTTON CLICK, WE MOVE(TranslateX) THE CAROUSEL TO THE RIGHT
42 | previousButton.addEventListener("click", function(){
43 | const currentSlide = carousel.querySelector(".active");
44 | const previousSlide = currentSlide.previousElementSibling;
45 |
46 | moveToSlide(carousel, currentSlide, previousSlide);
47 | hideButton(previousSlide, slides);
48 | moveToDot(previousSlide, slides, nav, dots);
49 | });
50 |
51 | // ON DOT CLICK
52 | nav.addEventListener("click", function(e){
53 |
54 | // if we didn't click on a dot, we exit
55 | if(e.target === nav) return;
56 |
57 | // SELECT THE CLICKED DOT
58 | const targetDot = e.target;
59 |
60 | // SELECT THE CURRENT DOT
61 | const currentDot = nav.querySelector(".active");
62 |
63 | // SELECT THE CURRENT SLIDE
64 | const currentSlide = carousel.querySelector(".active");
65 |
66 | // find the index of the dot, so we can target the right slide
67 | let targetDotIndex = findIndex(targetDot, dots);
68 |
69 | // SELECT THE TARGET SLIDE
70 | const targetSlide = slides[targetDotIndex];
71 |
72 | moveToSlide(carousel, currentSlide, targetSlide);
73 | toggleActive(currentDot, targetDot);
74 | hideButton(targetSlide, slides);
75 | })
76 |
77 | // MOVE TO DOT
78 | function moveToDot(targetSlide, slides, nav, dots){
79 | let slideIndex = findIndex(targetSlide, slides);
80 | const currentDot = nav.querySelector(".active");
81 | const targetDot = dots[slideIndex];
82 | toggleActive(currentDot, targetDot);
83 | }
84 | // MOVE TO SLIDE
85 | function moveToSlide(carousel, currentSlide, targetSlide){
86 | const position = targetSlide.style.left;
87 | carousel.style.transform = `translateX(-${position})`;
88 | toggleActive(currentSlide, targetSlide);
89 | }
90 |
91 | // Toggle ACTIVE CLASS
92 | function toggleActive(current, target){
93 | current.classList.remove("active");
94 | target.classList.add("active");
95 | }
96 |
97 | // HIDE BUTTON
98 | function hideButton(targetSlide, slides){
99 | // If the target slide is the first slide the previous button must be hidden
100 | // and the next button must be shown
101 | if(targetSlide === slides[0]){
102 | previousButton.classList.add("hide");
103 | nextButton.classList.remove("hide");
104 | }else if(targetSlide === slides[slides.length - 1]){
105 | // If the target slide is the last slide the next button must be hidden
106 | // and the previous button must be shown
107 | nextButton.classList.add("hide");
108 | previousButton.classList.remove("hide");
109 | }else{
110 | // if none of the above is true, we show both the next and prevoius button
111 | previousButton.classList.remove("hide");
112 | nextButton.classList.remove("hide");
113 | }
114 | }
115 |
116 | // FIND THE INDEX OF AN ITEM, INSIDE AN ARRAY OF ITEMS
117 | function findIndex(item, items){
118 | for(let index = 0; index < items.length; index++){
119 | if(item === items[index]){
120 | return index;
121 | }
122 | }
123 | }
124 |
125 |
--------------------------------------------------------------------------------
/img/left-arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
44 |
--------------------------------------------------------------------------------
/img/picture1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Carousel-JavaScript/4f286a8f2987a5175588ea82d10cfed3562422a6/img/picture1.jpg
--------------------------------------------------------------------------------
/img/picture2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Carousel-JavaScript/4f286a8f2987a5175588ea82d10cfed3562422a6/img/picture2.jpg
--------------------------------------------------------------------------------
/img/picture3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Carousel-JavaScript/4f286a8f2987a5175588ea82d10cfed3562422a6/img/picture3.jpg
--------------------------------------------------------------------------------
/img/right-arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
44 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Carousel in JavaScript
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
18 | -
19 |
20 |
21 | -
22 |
23 |
24 | -
25 |
26 |
27 |
28 |
29 |
30 |
33 |
34 |
39 |