.mini-carousel {
position: relative;
width: 100%;
max-width: 600px; /* lățimea maximă a carousel-ului */
margin: auto;
overflow: hidden;
}.carousel-track {
display: flex;
transition: transform 0.3s ease-in-out;
}.carousel-item {
min-width: 100%;
box-sizing: border-box;
}.carousel-item img {
width: 100%;
height: 300px; /* înălțimea afișată, schimbă după nevoie */
object-fit: cover; /* taie surplusul și păstrează proporțiile */
display: block;
}.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: #fff;
border: none;
padding: 0.5rem;
cursor: pointer;
z-index: 10;
font-size: 1.5rem;
}.prev { left: 10px; }
.next { right: 10px; }/* Responsive pentru mobil */
@media (max-width: 480px) {
.carousel-item img {
height: 200px;
}
.prev, .next {
font-size: 1.2rem;
padding: 0.3rem;
}
}
document.addEventListener(‘DOMContentLoaded’, () => {
const carousel = document.querySelector(‘.mini-carousel’);
const track = carousel.querySelector(‘.carousel-track’);
const slides = Array.from(track.children);
const nextButton = carousel.querySelector(‘.next’);
const prevButton = carousel.querySelector(‘.prev’);let currentIndex = 0;function updateCarousel() {
const width = slides[0].getBoundingClientRect().width;
track.style.transform = `translateX(-${currentIndex * width}px)`;
}nextButton.addEventListener(‘click’, () => {
currentIndex = (currentIndex + 1) % slides.length;
updateCarousel();
});prevButton.addEventListener(‘click’, () => {
currentIndex = (currentIndex – 1 + slides.length) % slides.length;
updateCarousel();
});window.addEventListener(‘resize’, updateCarousel);
updateCarousel();
});
