squirrel/static/js/slider.js
2021-02-25 22:23:58 +01:00

50 lines
No EOL
1.5 KiB
JavaScript

function setActiveSlideLink(slideNr) {
const slidelinks = document.querySelectorAll('.slide-link');
for (i = 0; i < slidelinks.length; i++) {
if (i == slideNr){
slidelinks[i].classList.add("slide-link-active");
} else {
slidelinks[i].classList.remove("slide-link-active");
}
}
}
function scrollToSlide(slideNr) {
const slider = document.querySelector('.slider');
const slides = slider.querySelector('.slides');
const width = slider.querySelector('.slide').clientWidth;
slides.scrollTo({left: slideNr * width, top: 0, behavior:'smooth'});
setActiveSlideLink(slideNr);
}
function scrollToNextSlideNr(slideNr) {
const slidelinks = document.querySelectorAll('.slide-link');
nextSlide = slideNr + 1;
if (nextSlide >= slidelinks.length){
nextSlide = 0;
}
scrollToSlide(nextSlide);
}
function scrollToPrevSlideNr(slideNr) {
const slidelinks = document.querySelectorAll('.slide-link');
prevSlide = slideNr - 1;
if (prevSlide < 0) {
prevSlide = slidelinks.length - 1;
}
scrollToSlide(prevSlide);
}
function scrollToNextSlide() {
const slidelinks = document.querySelectorAll('.slide-link');
for (i = 0; i < slidelinks.length; i++) {
if (slidelinks[i].classList.contains("slide-link-active")){
nextSlide = i+1;
if (nextSlide >= slidelinks.length){
nextSlide = 0;
}
scrollToSlide(nextSlide);
break;
}
}
}