Programmiererforum

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





❮ ❯