Programmiererforum

Code: Select all

.carousel-border-wrapper {
border: 5px solid #dfe1e2;
}
< /code>
Problem:

Wenn ich von der ersten Folie zur nächsten navigiere, verschwinden die linken und rechten Ränder kurz, bevor die zweite Folie angezeigt wird. Die oberen und unteren Grenzen bleiben intakt. Ich bin mir nicht sicher, was ich falsch mache, was dazu führt, dass ein Rat geschätzt wird.  Ich habe Stunden damit verbracht, das [url=viewtopic.php?t=26065]Problem[/url] ohne Auflösung zu debuggen.document.addEventListener("DOMContentLoaded", function() {
const track      = document.querySelector('.carousel-track');
const slides     = Array.from(track.children);
const nextButton = document.querySelector('.carousel-button.next');
const prevButton = document.querySelector('.carousel-button.prev');
const nav        = document.querySelector('.carousel-nav');

const SLIDES_PER_PAGE = 5;
let   currentIndex    = 0;

// Create ellipsis
const ellipsisLeft  = document.createElement('span');
ellipsisLeft.textContent = '...';
ellipsisLeft.classList.add('ellipsis', 'ellipsis-left');
ellipsisLeft.style.display = 'none';

const ellipsisRight = document.createElement('span');
ellipsisRight.textContent = '...';
ellipsisRight.classList.add('ellipsis', 'ellipsis-right');
ellipsisRight.style.display = 'none';

nav.appendChild(ellipsisLeft);
nav.appendChild(ellipsisRight);

function renderDots() {
// Remove old dots
nav.querySelectorAll('.carousel-indicator').forEach(dot => dot.remove());

const totalSlides = slides.length;
const start       = Math.floor(currentIndex / SLIDES_PER_PAGE) * SLIDES_PER_PAGE;
const end         = Math.min(start + SLIDES_PER_PAGE, totalSlides);

// Show/hide ellipsis
ellipsisLeft.style.display = start > 0 ? 'inline' : 'none';
ellipsisRight.style.display = end < totalSlides ? 'inline' : 'none';

// Insert dots before right ellipsis
for (let i = start; i < end; i++) {
const dot = document.createElement('span');
dot.classList.add('carousel-indicator');
if (i === currentIndex) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(i));
nav.insertBefore(dot, ellipsisRight);
}
}

const updateUI = () => {
renderDots();

prevButton.disabled = currentIndex === 0;
nextButton.disabled = currentIndex === slides.length - 1;

prevButton.style.opacity = prevButton.disabled ? '0.5' : '1';
nextButton.style.opacity = nextButton.disabled ? '0.5' : '1';
prevButton.style.cursor  = prevButton.disabled ? 'default' : 'pointer';
nextButton.style.cursor  = nextButton.disabled ? 'default' : 'pointer';
};

const goToSlide = (index) => {
const slideWidth = slides[0].getBoundingClientRect().width;
track.style.transform = `translateX(-${slideWidth * index}px)`;
currentIndex = index;
updateUI();
};

nextButton.addEventListener('click', () => {
if (currentIndex < slides.length - 1) {
goToSlide(currentIndex + 1);
}
});

prevButton.addEventListener('click', () => {
if (currentIndex > 0) {
goToSlide(currentIndex - 1);
}
});

// Ellipsis events
ellipsisLeft.addEventListener('click', () => {
const start = Math.floor(currentIndex / SLIDES_PER_PAGE) * SLIDES_PER_PAGE;
goToSlide(Math.max(0, start - SLIDES_PER_PAGE));
});

ellipsisRight.addEventListener('click', () =>  {
const start = Math.floor(currentIndex / SLIDES_PER_PAGE) * SLIDES_PER_PAGE;
goToSlide(Math.min(start + SLIDES_PER_PAGE, slides.length - 1));
});

// Initial state
updateUI();
});< /code>
* {
box-sizing: border-box;
}

.carousel {
position: relative;
overflow: hidden;
margin: auto;
}

.carousel-track {
display: flex;
transition: transform 2.1s ease-in-out;
}

.carousel-slide {
min-width: 100%;
transition: opacity 2.1s ease;
}

.carousel-slide img {
width: 100%;
display: block;
}

.slide-border {
border: 1px solid #dfe1e2 !important;
}

.carousel-nav {
text-align: center;
left: 35%;
bottom: 180px;
position: absolute;
}

.carousel-container {
position: relative;
width: 100%;
max-width: 1000px;
/* optional container width */
margin: 0 auto;
display: flex;
justify-content: center;
/* centers content horizontally */
align-items: center;
/* centers content vertically if needed */
}

.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;
}

.carousel-button {
position: absolute;
transform: translateY(-50%);
font-size: 54px;
color: #1a4480;
border: none;
padding: 10px;
z-index: 10;
background-color: transparent;
}

.carousel-button.prev {
left: 25%;
position: absolute;
bottom: 115px;
z-index: 10;
}

.carousel-button.next {
right: 30%;
position: absolute;
bottom: 115px;
z-index: 10;
}

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

.carousel-nav .ellipsis {
font-size: 3rem !important;
cursor: pointer;
color: #1a4480;

}

.carousel-border-wrapper {
border: 5px solid red;
display: inline-block;
}

@media screen and (max-width: 717px) {
.carousel-nav {
bottom: 230px;
width: 31%;
}

.carousel-button.next {
bottom: 160px;
}

.carousel-button.prev {
bottom: 160px;
}
}< /code>




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



ABCs

Test1.




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



XYZ

test2




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



xxx
test test





❮ ❯