Как я могу поместить стрелки карусели и точки навигации внутри каждого слайда справа? ⇐ Javascript

[Anonymous]

Я строю карусель с помощью USWD и пользовательского JavaScript. Я хочу, чтобы у каждого слайда были стрелки и навигационные точки с правой стороны. Точки и стрелы показывают только на первом слайде, но точки не показывают на остальных слайдах. Как я могу сделать эту работу таким, что точки и стрелы показывают на всех слайдах? Пожалуйста, посмотрите, что это в полном представлении, чтобы увидеть поведение. Спасибо.

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function() {
const root = document.getElementById('ABCCarousel');
if (!root) return;

const LOOP = false;

const track = root.querySelector('.ABC-carousel__viewport');
const slides = Array.from(root.querySelectorAll('.ABC-slide'));

// Get *all* controls
const prevButtons = root.querySelectorAll('.carousel-button.prev');
const nextButtons = root.querySelectorAll('.carousel-button.next');
const nav = root.querySelector('.carousel-nav');

// Ensure no slide has "hidden" attribute
slides.forEach(s => s.removeAttribute('hidden'));

// Build dots
nav.innerHTML = '';
const indicators = slides.map((_, i) => {
const dot = document.createElement('span');
dot.className = 'carousel-indicator';
dot.addEventListener('click', () => goTo(i));
nav.appendChild(dot);
return dot;
});

let index = 0;

function clamp(i) {
const n = slides.length;
return (i % n + n) % n;
}

function goTo(i) {
index = LOOP ? clamp(i) : Math.max(0, Math.min(slides.length - 1, i));
const offsetPct = -index * 100;
track.style.transform = `translateX(${offsetPct}%)`;

// Update dots
indicators.forEach((dot, j) => dot.classList.toggle('active', j === index));

// Enable/disable arrows
if (!LOOP) {
prevButtons.forEach(btn => btn.disabled = index === 0);
nextButtons.forEach(btn => btn.disabled = index === slides.length - 1);
} else {
prevButtons.forEach(btn => btn.disabled = false);
nextButtons.forEach(btn => btn.disabled = false);
}

// a11y
slides.forEach((s, j) => s.setAttribute('aria-hidden', j === index ? 'false' : 'true'));
}

// Attach listeners to *all* controls
prevButtons.forEach(btn => btn.addEventListener('click', () => goTo(index - 1)));
nextButtons.forEach(btn => btn.addEventListener('click', () => goTo(index + 1)));

// Keyboard nav
root.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
e.preventDefault();
goTo(index - 1);
}
if (e.key === 'ArrowRight') {
e.preventDefault();
goTo(index + 1);
}
});

// Resize handling
window.addEventListener('resize', () =>  {
track.style.transform = `translateX(${-index * 100}%)`;
});

// Init
goTo(0);
});< /code>
.carousel-controls {
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
background: #fff;
width: 50%;
max-width: 500px;
margin: 0 auto;
}

.carousel-button {
font-size: 54px;
color: #1a4480;
background: transparent;
border: none;
cursor: pointer;
padding: 10px;
}

.carousel-button:disabled {
color: #919191;
pointer-events: none;
}

.carousel-nav {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 150px;
min-width: 150px;
}

.carousel-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
border: 2px solid #1a4480;
}

.carousel-indicator.active {
background: #1a4480 !important;
}

.ellipsis {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
color: #1a4480;
user-select: none;
width: 24px;
height: 24px;
margin: 0 5px;
}

#ABCCarousel .ABC-carousel__viewport {
display: flex;
transition: transform 0.5s ease-in-out;
will-change: transform;
}

#ABCCarousel .ABC-slide {
flex: 0 0 100%;
}

#ABCCarousel {
overflow: hidden;
/* hide the overflow */
width: 100%;
/* full width */
}

#ABCCarousel .ABC-carousel__viewport {
display: flex;
/* line up slides horizontally */
transition: transform 0.5s ease-in-out;
/* smooth animation */
will-change: transform;
}

#ABCCarousel .ABC-slide {
flex: 0 0 100%;
/* each slide takes full width of viewport */
}< /code>





FuyuuyuyC

Latest Posts






[img]https://cdn.britannica.com/62/156362-050-4E8FE282/Acacia-tree-savanna-Zimbabwe.jpg?[/img]
 

ABCD
❮
 ❯



 



[img]https://cdn.britannica.com/62/156362-050-4E8FE282/Acacia-tree-savanna-Zimbabwe.jpg?[/img]

ytyty [url=#]dffdfd.[/url]
❮
  ❯

Подробнее здесь: https://stackoverflow.com/questions/797 ... ide-on-the