Banner Images

Updated version for 10 image banners with:

• Banner size: 1920px × 600px
• 10 slides
• Auto-play
• Next/Previous arrows
• 10 pagination dots
• Responsive Lightspeed Online Store compatible

Replace image URLs with your own:

 

 

 

(function(){

let slides=document.querySelectorAll(".ls-slide");

let dots=document.querySelectorAll(".dot");

let current=0;

 

function showSlide(index){

slides.forEach(slide=>{

slide.classList.remove("active");

});

dots.forEach(dot=>{

dot.classList.remove("active");

});

slides[index].classList.add("active");

dots[index].classList.add("active");

current=index;

}

 

document.querySelector(".ls-next").onclick-removed=function(){

current++;

if(current >= slides.length){

current=0;

}

showSlide(current);

};

 

document.querySelector(".ls-prev").onclick-removed=function(){

current--;

if(current < 0){

current=slides.length-1;

}

showSlide(current);

};

 

dots.forEach((dot,index)=>{

dot.onclick-removed=function(){

showSlide(index);

}

});

 

// AUTO PLAY 5 SECONDS

setInterval(function(){

current++;

if(current >= slides.length){

current=0;

}

showSlide(current);

},5000);

 

})();

 

 

 

 

 

Updated for Lightspeed header slider banner size: 1920px × 600px (wide hero banner). I changed:

• Image dimensions → 1920 × 600
• Slider ratio → 16 / 5
• Better desktop hero height
• Mobile responsive adjustment

 

 

 

(function(){

let slides=document.querySelectorAll(".ls-slide");

let dots=document.querySelectorAll(".dot");

let current=0;

function showSlide(i){

slides.forEach(s=>s.classList.remove("active"));

dots.forEach(d=>d.classList.remove("active"));

slides[i].classList.add("active");

dots[i].classList.add("active");

current=i;

}

 

document.querySelector(".ls-next").onclick-removed=function(){

current++;

if(current>=slides.length){

current=0;

}

showSlide(current);

};

 

document.querySelector(".ls-prev").onclick-removed=function(){

current--;

if(current<0){

current=slides.length-1;

}

showSlide(current);

};

 

dots.forEach((dot,index)=>{

dot.onclick-removed=function(){

showSlide(index);

}

});

 

// autoplay every 5 seconds

setInterval(()=>{

current++;

if(current>=slides.length){

current=0;

}

showSlide(current);

},5000);

 

})();