I am working on a webpage where I’m loading several slides, including 14 images in total. The page displays ellipses after every 5 slides to indicate that there are additional slides available. When the user clicks on the right ellipsis, it should navigate to the next set of slides. Similarly, clicking the left ellipsis should take the user to the previous set. I’ve implemented event listeners for the ellipses, but they aren’t functioning as expected. I’m unsure what’s causing the issue. Here is my code.
// Initialization
let slideIndex = 1;
const dotsPerPage = 5; // Number of dots to show per page
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let slides = document.getElementsByClassName("mySlides");
let dotsWrapper = document.querySelector(".dots-wrapper");
let totalSlides = slides.length;
let ellipsisLeft = document.querySelector(".ellipsis-left");
let ellipsisRight = document.querySelector(".ellipsis-right");
if (n > totalSlides) { slideIndex = 1; }
if (n < 1) { slideIndex = totalSlides; }
// Show or hide slides
for (let i = 0; i < totalSlides; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
// Clear existing dots
dotsWrapper.innerHTML = '';
// Determine the range of dots to show
let start = Math.floor((slideIndex - 1) / dotsPerPage) * dotsPerPage;
let end = Math.min(start + dotsPerPage, totalSlides);
// Show or hide ellipses based on total slides
ellipsisLeft.style.display = (start > 0 && totalSlides > dotsPerPage) ? "inline" : "none";
ellipsisRight.style.display = (end < totalSlides && totalSlides > dotsPerPage) ? "inline" : "none";
// Generate dots dynamically
for (let i = start; i < end; i++) {
let dot = document.createElement("span");
dot.className = "dot";
dot.setAttribute("tabindex", "0");
dot.setAttribute("aria-label", `Go to slide ${i + 1}`);
dot.setAttribute("role", "button");
dot.setAttribute("onclick", `currentSlide(${i + 1})`);
if (i === slideIndex - 1) {
dot.className += " active";
}
dotsWrapper.appendChild(dot);
}
// Handle arrow visibility
document.querySelector(".prev").classList.toggle("disabled", slideIndex === 1);
document.querySelector(".next").classList.toggle("disabled", slideIndex === totalSlides);
}
// Add event listeners for ellipsis after DOM content has loaded
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.ellipsis-left').addEventListener('click', function() {
let start = Math.floor((slideIndex - 1) / dotsPerPage) * dotsPerPage;
let newSlideIndex = Math.max(1, start); // Go to the first slide of the previous set
showSlides(newSlideIndex);
});
document.querySelector('.ellipsis-right').addEventListener('click', function() {
let start = Math.floor((slideIndex - 1) / dotsPerPage) * dotsPerPage;
let newSlideIndex = Math.min(start + dotsPerPage + 1, document.getElementsByClassName("mySlides").length); // Go to the first slide of the next set
showSlides(newSlideIndex);
});
});<style>
.rbs-slideshow .slideshow {
position: relative;
padding: 32px;
padding-top: 16px;
border: 1px solid lightgray;
}
.rbs-slideshow .mySlides {
position: relative;
display: none;
}
.rbs-slideshow .slideshow img {
cursor: pointer;
}
.rbs-slideshow .slideshow img {
vertical-align: middle;
}
.rbs-slideshow .caption {
background-color: #185A95;
padding: 20px;
}
.h2-text {
color: #ffffff;
}
.block-text {
color: #ffffff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
height:50px;
}
/* Target .usa-button inside .rbs-slideshow .slideshow */
.rbs-slideshow .slideshow .usa-button,
.rbs-slideshow .slideshow a.usa-button {
background-color: #fff;
color: #026fc2;
box-shadow: inset 0 0 0 1px #026fc2;
}
/* Target a.usa-button:hover inside .rbs-slideshow .slideshow */
.rbs-slideshow .slideshow a.usa-button:hover {
color: #fff;
background-color: #105183
}
.rbs-slideshow .fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.rbs-slideshow .prev, .rbs-slideshow .next {
cursor: pointer;
color: #185A95;
font-size: 50px;
transition: 0.6s ease;
user-select: none;
text-decoration: none;
vertical-align: middle;
}
.rbs-slideshow .prev {
margin-right: 5px;
}
.rbs-slideshow .next {
margin-left: 5px;
}
.rbs-slideshow .prev:hover, .rbs-slideshow .next:hover {
text-decoration: none;
color: #185A95;
}
.rbs-slideshow .dot {
cursor: pointer;
height: 16px;
width: 16px;
margin: 0 2px;
background-color: lightgray;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
vertical-align: middle;
}
.rbs-slideshow .active {
background-color: #185A95 !important;
font-weight: bold;
background: none;
}
.rbs-slideshow .disabled {
pointer-events: none;
color: #bbb;
}
/* Responsive layout - makes the text and buttons adapt to screen size */
@media screen and (max-width: 768px) {
.rbs-slideshow .caption-container {
padding: 10px;
}
}
@media screen and (max-width: 30em) {
.rbs-slideshow .caption h2 {
font-size: 14px;
}
.rbs-slideshow .caption p {
font-size: 10px;
}
}
@media screen and (max-width: 30em) {
.rbs-slideshow .usa-button {
width: auto;
font-size: 1.06rem;
}
}
/* Lightbox */
.lightbox {
display: none;
position: fixed;
z-index: 1000;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.6); /* Light gray background */
}
.lightbox-content {
position: relative;
margin: auto;
max-width: 80%;
}
.lightbox-slide {
display: none;
text-align: center;
}
.lightbox img {
margin: auto;
border: 10px solid white;
box-shadow: 0 0 20px #fff;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
width: auto;
}
.lightbox .close {
position: absolute;
top: 20px;
right: 35px;
color: #fff;
font-size: 40px;
cursor: pointer;
background-color: transparent;
border: 0px;
}
.lightbox .prev, .lightbox .next {
cursor: pointer;
position: fixed;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 30px;
transition: 0.6s ease;
user-select: none;
}
.lightbox .prev {
left: 0;
text-decoration: none;
font-size: 50px;
}
.lightbox .next {
right: 0;
text-decoration: none;
font-size: 50px;
}
.lightbox .prev:hover, .lightbox .next:hover {
background-color: rgba(0,0,0,0.8);
}
.lightbox-caption {
color: #f2f2f2;
font-size: 16px;
padding: 16px 24px;
position: absolute;
bottom: 24px;
left: 0;
width: 80%;
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px;
margin: 0 0 0 130px;
line-height: 24px;
}
@media only screen and (max-width: 760px) {
.lightbox-caption {
margin: auto;
}
}
@media screen and (max-width: 1000px) {
.rbs-slideshow .slideshow a {
font-size: 50px !important;
}
}
@media screen and (max-width: 1000px) {
.lightbox .prev,
.lightbox .next {
font-size: 50px !important;
}
}
</style>
<style>
.dots-container {
text-align: center;
margin-top: 20px;
}
.dots-wrapper {
display: inline-block;
}
.ellipsis-left, .ellipsis-right {
display: inline-block;
border-radius: 50%;
font-weight: bold;
font-size: 20px; }
</style> <div class="rbs-slideshow" style=" margin-top: 20px;">
<div class="slideshow" style=" width: 656px;">
<p style=" color: black; font-weight: 700;">Click on the image to view higher resolution pictures</p>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(2)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(2); }" style=" width: 656px; height: 451px;" />
<div class="caption" tabindex="0"><span class="block-text">1983</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(3)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(3); }" style=" width: 656px; height: 451px;" />
<div class="caption" tabindex="0"><span class="block-text">1983</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(4)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(4); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">1988</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(5)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(5); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">1992</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(6)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(6); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">1993</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(7)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(7); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">2016</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(8)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(8); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">2017</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(9)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(9); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">2018</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(10)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(10); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">2018</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(11)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(11); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">2018</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(12)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(12); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">2019</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(13)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(13); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">2023</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(14)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(14); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">2023</span></div>
</div>
<div class="mySlides fade" style=" display: block;"><img alt="" src="" aria-label="click to enlarge" tabindex="0" onclick="openLightbox(); currentImage(15)" onkeydown="if(event.key === 'Enter'){ openLightbox(); currentImage(15); }" style=" width: 656px; height: 451px;" />
<div class="caption"><span class="block-text" tabindex="0">2024</span></div>
</div>
<!-- The dots/circles and navigation arrows
<div style=" text-align: center; margin-top: 20px;"><a class="prev disabled" onclick="plusSlides(-1)">❮</a> <span class="dot active" tabindex="0" aria-label="Go to slide 1 to view CARE Leaders photo from 2024 NOLA All-staff meeting" role="button" onclick="currentSlide(1)"> </span> <span class="dot" tabindex="0" aria-label="Go to slide 2 to view CARE group Photo 2 from 2024 NOLA All-staff meeting" role="button" onclick="currentSlide(2)"> </span> <span class="dot" tabindex="0" aria-label="Go to slide 3 CARE group Photo 2 from 2024 NOLA All-staff meeting" role="button" onclick="currentSlide(3)"> </span> <span class="dot" tabindex="0" aria-label="Go to slide 4 to view CARE group Photo 3 from NOLA All-staff meeting" role="button" onclick="currentSlide(4)"> </span> <span class="dot" tabindex="0" aria-label="Go to slide 5 to view CARE group Photo 4 from NOLA All-staff meeting" role="button" onclick="currentSlide(5)"> </span> <a class="next" onclick="plusSlides(1)">❯</a></div>
</div>-->
<div style=" text-align: center; margin-top: 20px;"><a class="prev disabled" onclick="plusSlides(-1)">❮</a> <span class="ellipsis ellipsis-left" style=" display: none; cursor: pointer;">…</span>
<div class="dots-wrapper"><!-- Dots will be generated dynamically here --></div>
<span class="ellipsis ellipsis-right" style=" display: none; cursor: pointer;">…</span> <a class="next" onclick="plusSlides(1)">❯</a></div>