Почему прослушиватели событий для многоточия не работают
Я работаю над веб-страницей, на которую загружаю несколько слайдов, в том числе 14 изображений. На странице после каждых 5 слайдов отображаются многоточия, указывающие на наличие дополнительных слайдов. Когда пользователь нажимает на правое многоточие, он должен перейти к следующему набору слайдов. Аналогичным образом, щелчок по левому многоточию должен привести пользователя к предыдущему набору. Я реализовал прослушиватели событий для эллипсов, но они не работают должным образом. Я не уверен, что является причиной проблемы. Вот мой код.
// 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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
50
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Прослушиватели кликов для многоточия не обновляются slideIndex, как это делают кнопки «Далее» и «Предыдущий». Вместо использования newSlideIndex назначьте slideIndex.
// 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;
slideIndex = Math.max(1, start); // Go to the first slide of the previous set
showSlides(slideIndex);
});
document.querySelector('.ellipsis-right').addEventListener('click', function() {
let start = Math.floor((slideIndex - 1) / dotsPerPage) * dotsPerPage;
slideIndex = Math.min(start + dotsPerPage + 1, document.getElementsByClassName("mySlides").length); // Go to the first slide of the next set
showSlides(slideIndex);
});
});<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>Большое спасибо!
—
29.08.2024 02:39
Другие вопросы по теме
Как центрировать содержимое навигации и обеспечить растягивание фона на всю ширину на больших экранах?
Как найти элементы HTML и элементы управления ASP, имеющие ссылки на классы CSS, не имеющие определения в Visual Studio
Как количество добавлений/удалений продуктов может быть независимым для каждого продукта?
Эффект медленной упругости при наведении с использованием CSS и JS
Проблема с удалением части элемента SVG, пересекающей линию
Запретить Chrome изменять размер шрифта
Почему в моем адаптивном HTML-меню не отображается кнопка переключения?
Как передать значение переменной JavaScript в функцию golang с помощью шаблона HTML
Как сгруппировать столбцы в таблице данных: используя вложенные таблицы или colspan?
HTML-контент всплывающего окна Bootstrap 5
Похожие вопросы
Есть ли способ повторять наблюдаемое до тех пор, пока не испустит другое наблюдаемое?
Как определить, находится ли клиент внутри или за пределами офисной сети с помощью Angluar
Как включить использование запроса и импорта в файле javascript?
Как количество добавлений/удалений продуктов может быть независимым для каждого продукта?
Эффект медленной упругости при наведении с использованием CSS и JS
Большинство камней удалено в одном ряду или столбце
JQuery устанавливает эффект Transform3D
Как передать значение переменной JavaScript в функцию golang с помощью шаблона HTML
Как сгруппировать столбцы в таблице данных: используя вложенные таблицы или colspan?
Что не так в этом вычислении кубической кривой Безье?
На вашем
<span class = "ellipsis ellipsis-left"установленstyle = " display: none;, это переопределит любое правило CSS, поскольку это встроенный стиль. Если вы используете таблицу стилей, постарайтесь свести к минимуму использование атрибутовstyle = ""(и правил!important), чтобы избежать возможности переопределить свойства стиля.