50 lines
1.5 KiB
JavaScript
50 lines
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|