81 lines
1.5 KiB
JavaScript
81 lines
1.5 KiB
JavaScript
|
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");
|
||
|
}
|
||
|
|