Fullwidth Slideshow with Arrows/Dots

Description:

• Fullwidth slideshow with pagination arrows/dots
• View Demo – Password: abc
• Buy me a coffee if it is helpful for you.

#1. Install Code

You need to add a Team Section

Hover on top right of section > Click Edit Section > At Anchor Link, enter word: fullwidth-slider

Disable all options

At Content tab, add your desired slideshow images.

Next, hover on Page where you use Team Section > Click Gear icon

Click Advanced > Paste this code

<!-- Fullwidth slideshow with arrows dots - [email protected] -->
<style>
  #fullwidth-slider{overflow:hidden!important;.content-wrapper{padding:0!important;margin:0!important;max-width:100%!important;width:100%!important}.user-items-list{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;height:100vh;padding:0!important}.user-items-list-simple{display:block!important;height:100%;margin:0}.list-item{position:absolute!important;top:0;left:0;width:100vw!important;height:100vh!important;margin:0!important;padding:0!important;opacity:0;visibility:hidden;transition:opacity 1s ease-in-out,visibility 1s;z-index:1;display:flex!important;flex-direction:column;justify-content:center;background-color:#111}.list-item.active-slide{opacity:1;visibility:visible;z-index:2}.list-item::before{content:"";position:absolute;inset:0;background:rgb(0 0 0 / .4);z-index:2;pointer-events:none}.list-item-media{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;z-index:1!important}.list-item-media img{object-fit:cover!important;width:100%!important;height:100%!important;object-position:center center!important}.custom-slider-controls{position:absolute;inset:0;pointer-events:none;z-index:10}.custom-slider-controls>*{pointer-events:auto}.custom-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:45px;height:45px;background-color:#fff;border-radius:50%;border:none;cursor:pointer;z-index:10;display:flex;justify-content:center;align-items:center;font-size:18px;line-height:1;color:#222;transition:all .3s ease;box-shadow:0 2px 10px rgb(0 0 0 / .1)}.custom-nav-btn:hover{transform:translateY(-50%) scale(1.1);background-color:#f8f8f8}.custom-prev-btn{left:30px}.custom-next-btn{right:30px}.custom-indicators{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:15px;z-index:10}.custom-dot{width:10px;height:10px;border-radius:50%;background-color:rgb(255 255 255 / .4);cursor:pointer;transition:all .3s ease;border:1px solid rgb(0 0 0 / .1)}.custom-dot.active{background-color:#fff;transform:scale(1.2)}@media (max-width:767px){.list-item-content{padding:0 20px;text-align:center!important;align-items:center!important}.list-item-content__title{font-size:10px!important;margin-bottom:20px!important}.list-item-content__description{margin-left:auto;margin-right:auto}.list-item-media-inner{width:100%!important;height:100%!important}.custom-nav-btn{width:35px;height:35px;font-size:14px;background:rgb(255 255 255 / .9)}.custom-prev-btn{left:15px}.custom-next-btn{right:15px}}}
</style>
<script>
  document.addEventListener("DOMContentLoaded",function(){
    const sectionSelector='#fullwidth-slider';
    const wrapper=document.querySelector(`${sectionSelector} .user-items-list-simple`);if(!wrapper)return;const slideImages=wrapper.querySelectorAll("img");slideImages.forEach(img=>{let originalSrc=img.getAttribute('data-src');if(originalSrc){let highResSrc=originalSrc.split('?')[0]+"?format=2500w";img.removeAttribute('srcset');img.setAttribute('src',highResSrc);img.classList.add('sqs-image-loaded');}});const slides=wrapper.querySelectorAll(".list-item");if(!slides.length)return;if(wrapper.parentElement.querySelector(".custom-slider-controls"))return;const controlsHTML=`<button class="custom-nav-btn custom-prev-btn" aria-label="Previous Slide">&#10094;</button><button class="custom-nav-btn custom-next-btn" aria-label="Next Slide">&#10095;</button><div class="custom-indicators">${Array.from(slides).map((_,i)=>`<div class="custom-dot ${i===0?"active":""}" data-index="${i}"></div>`).join("")}</div>`;const controlsContainer=document.createElement("div");controlsContainer.className="custom-slider-controls";controlsContainer.innerHTML=controlsHTML;wrapper.parentElement.appendChild(controlsContainer);const prevBtn=controlsContainer.querySelector(".custom-prev-btn");const nextBtn=controlsContainer.querySelector(".custom-next-btn");const dots=controlsContainer.querySelectorAll(".custom-dot");let currentSlide=0;const totalSlides=slides.length;slides.forEach(s=>s.classList.remove("active-slide"));slides[0].classList.add("active-slide");function updateSlider(index){slides.forEach(slide=>slide.classList.remove("active-slide"));dots.forEach(dot=>dot.classList.remove("active"));slides[index].classList.add("active-slide");dots[index].classList.add("active");currentSlide=index}function nextSlide(){let newIndex=currentSlide+1;if(newIndex>=totalSlides)newIndex=0;updateSlider(newIndex)}function prevSlide(){let newIndex=currentSlide-1;if(newIndex<0)newIndex=totalSlides-1;updateSlider(newIndex)}nextBtn.addEventListener("click",e=>{e.preventDefault();nextSlide()});prevBtn.addEventListener("click",e=>{e.preventDefault();prevSlide()});dots.forEach(dot=>{dot.addEventListener("click",e=>{const index=parseInt(e.currentTarget.getAttribute("data-index"),10);if(!Number.isNaN(index))updateSlider(index)})})});
</script>

#2. Customize

#2.1. To change arrow style, use this to Custom CSS

button.custom-nav-btn {
    background-color: red !important;
    color: #fff !important;
    width: 40px !important;
    height: 40px !important;
}

#2.2. To change dots style, use this to Custom CSS

div.custom-dot {
    background-color: red !important;
}
.custom-dot.active {
    background-color: green !important;
}