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
| var carousel = {
box: document.querySelector('.carouselbox')
, next: carousel.box.querySelector('.next')
, prev: carousel.box.querySelector('.prev')
, items: carousel.box.querySelectorAll('.content li')
, counter: 0
, amount: carousel.items.length
, current: carousel.items[0]
, active: carousel.box.classList.add('active')
, navigate: function (direction) {
carousel.current.classList.remove('current');
carousel.counter = carousel.counter + this.direction;
if (this.direction === -1 && carousel.counter < 0) {
carousel.counter = carousel.amount - 1;
}
if (direction === 1 && !carousel.items[carousel.counter]) {
carousel.counter = 0;
}
carousel.current = carousel.items[carousel.counter];
carousel.current.classList.add('current');
}
, click: function () {
next.addEventListener('click', function (e) {
carousel.navigate(1);
});
prev.addEventListener('click', function (e) {
carousel.navigate(-1);
});
carousel.navigate(0);
}
, clavier: function () {
document.addEventListener("keydown", function (e) {
if (e.keyCode === 37) {
carousel.navigate(-1);
}
else if (e.keyCode === 39) {
carousel.navigate(1);
}
});
},
};
carousel.navigate();
carousel.clavier();
carousel.click(); |
Partager