Programmiererforum

by **Anonymous** » 19 Aug 2025, 22:35

Ich baue ein individuelles Karussell mit mehreren Folien. Jede Folie sieht derzeit so aus: < /p>
Ich möchte nur einen sichtbaren Grenze um den Bildbereich, also habe ich diesen Stil angewendet: .Carousel-Grand-Wrapper {
Grenze: 5px solide #dfe1e2;
}
Problem:
Wenn ich von der ersten Folie von der ersten Folie zu dem nächsten Mal navigiert wird, und das nächste Mal, dass das nächste Diagramm zu dem nächsten Mal, ist das nächste Mal, und das nächste Mal. 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 Problem ohne Auflösung zu debuggen.

Code: Select all

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 0.5s ease-in-out;
}

.carousel-slide {
min-width: 100%;
transition: opacity 0.5s 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





❮ ❯

Programmiererforum

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

Post a reply

Expand view Topic review: Wie kann man einen Grenze nur um Karussellbilder (keine Bildunterschriften) in einer Schieberspur festhalten?