consul/website/source/assets/javascripts/consul-connect/carousel.js

42 lines
916 B
JavaScript

var qs = document.querySelector.bind(document)
var qsa = document.querySelectorAll.bind(document)
// siema carousels
var dots = qsa('.g-carousel .pagination li')
var carousel = new Siema({
selector: '.siema',
duration: 200,
easing: 'ease-out',
perPage: 1,
startIndex: 0,
draggable: true,
multipleDrag: true,
threshold: 20,
loop: true,
rtl: false,
onChange: function() {
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove('active')
}
dots[carousel.currentSlide].classList.add('active')
}
})
// on previous button click
qs('.g-carousel .prev')
.addEventListener('click', function() {
carousel.prev()
})
// on next button click
qs('.g-carousel .next')
.addEventListener('click', function() {
carousel.next()
})
// on dot click
for (let i = 0; i < dots.length; i++) {
dots[i].addEventListener('click', function() {
carousel.goTo(i)
})
}