Wie kann man einen Grenze nur um Karussellbilder (keine Bildunterschriften) in einer Schieberspur festhalten?

Anonymous · Post by **Anonymous** » 20 Aug 2025, 02:09

Ich baue ein individuelles Karussell mit mehreren Folien. Jede Folie sieht derzeit so aus: < /p>
Ich möchte nur einen sichtbaren Rand um den Bildbereich, also habe ich diesen Stil angewendet: < /p>

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





❮ ❯

Wie kann man einen Grenze nur um Karussellbilder (keine Bildunterschriften) in einer Schieberspur festhalten?

Wie kann man einen Grenze nur um Karussellbilder (keine Bildunterschriften) in einer Schieberspur festhalten? ⇐ HTML

Quick Reply