You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.5 KiB
80 lines
1.5 KiB
let slides=document.querySelector('.slider-items').children;
|
|
let nextSlide=document.querySelector('.right-slide');
|
|
let prevSlide=document.querySelector('.left-slide');
|
|
let totalSlides=slides.length;
|
|
let index=0;
|
|
|
|
console.log(index);
|
|
|
|
|
|
nextSlide.onclick = () => {
|
|
next("next");
|
|
}
|
|
|
|
prevSlide.onclick = () => {
|
|
next("prev");
|
|
}
|
|
|
|
let next = (direction)=> {
|
|
if (direction=="next"){
|
|
index++;
|
|
if (index==totalSlides){
|
|
index=0;
|
|
}
|
|
}
|
|
else{
|
|
if(index==0){
|
|
index=totalSlides-1;
|
|
}
|
|
else {
|
|
index--;
|
|
}
|
|
}
|
|
|
|
for (i=0; i<slides.length;i++){
|
|
slides[i].classList.remove("active");
|
|
}
|
|
slides[index].classList.add("active");
|
|
}
|
|
|
|
const spider=document.querySelector('.spider-items').children;
|
|
const spiderNext=document.querySelector('#spider-right');
|
|
const spiderPrev=document.querySelector('#spider-left');
|
|
let spiderTotal=spider.length;
|
|
|
|
console.log(spider);
|
|
console.log(spiderNext);
|
|
console.log(spiderPrev);
|
|
console.log(spiderTotal);
|
|
|
|
|
|
spiderNext.onclick = () => {
|
|
nextSpider("next");
|
|
}
|
|
|
|
spiderPrev.onclick = () => {
|
|
nextSpider("prev");
|
|
}
|
|
|
|
let nextSpider = (direction)=> {
|
|
if (direction=="next"){
|
|
index++;
|
|
if (index==spiderTotal){
|
|
index=0;
|
|
}
|
|
}
|
|
else{
|
|
if(index==0){
|
|
index=spiderTotal-1;
|
|
}
|
|
else {
|
|
index--;
|
|
}
|
|
}
|
|
|
|
for (i=0; i<spider.length;i++){
|
|
spider[i].classList.remove("active");
|
|
}
|
|
spider[index].classList.add("active");
|
|
}
|
|
|