-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
35 lines (31 loc) · 1001 Bytes
/
main.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
document.querySelectorAll('.carousel').forEach((carousel) => {
const items = carousel.querySelectorAll('.carousel_item');
const buttonsHtml = Array.from(items, () => {
return `<span class="carousel_button"></span>`;
});
carousel.insertAdjacentHTML(
'beforeend',
`
<div class="carousel_nav">
${buttonsHtml.join('')}
</div>
`
);
const buttons = carousel.querySelectorAll('.carousel_button');
buttons.forEach((button, i) => {
button.addEventListener('click', () => {
// un-select all the items
items.forEach((item) =>
item.classList.remove('carousel_item-selected')
);
buttons.forEach((button) =>
button.classList.remove('carousel_button-selected')
);
// select buttons
items[i].classList.add('carousel_item-selected');
button.classList.add('carousel_button-selected');
});
});
items[0].classList.add('carousel_item-selected');
buttons[0].classList.add('carousel_button-selected');
});