.cyt-mobilede-slider { position: relative; overflow: hidden; max-width: 100%; margin: 20px 0; } .cyt-mobilede-slider-track { display: flex; transition: transform 0.4s ease; } /* Desktop & Tablet: 3 Fahrzeuge pro Bildschirmbreite */ .cyt-mobilede-slider-item { min-width: 33.3333%; box-sizing: border-box; padding: 10px; } @media (max-width: 600px) { /* Handy: 1 Fahrzeug pro Bildschirmbreite */ .cyt-mobilede-slider-item { min-width: 100%; } } .cyt-mobilede-slider-card { border: 1px solid #ddd; padding: 10px; display: flex; flex-direction: column; font-size: 0.9em; background: #fff; height: 100%; } .cyt-mobilede-slider-title { font-size: 1.0em; font-weight: 600; margin-bottom: 6px; } .cyt-mobilede-slider-image { text-align: center; } .cyt-mobilede-slider-image img { width: auto; max-width: 100%; max-height: 300px; /* gewünschte Max-Höhe */ height: auto; display: inline-block; } .cyt-mobilede-slider-no-image { width: 100%; padding: 40px 10px; text-align: center; background: #f5f5f5; color: #777; font-size: 0.9em; } .cyt-mobilede-slider-price { margin-top: 10px; font-size: 1.1em; } .cyt-mobilede-slider-make { font-size: 0.95em; margin-top: 2px; font-weight: 600; } .cyt-mobilede-slider-model { font-size: 0.90em; margin-top: 1px; color: #444; } .cyt-mobilede-slider-vat { font-size: 0.85em; margin-top: 4px; color: #555; } .cyt-mobilede-slider-meta { margin-top: 6px; line-height: 1.4; } .cyt-mobilede-slider-detail-link { margin-top: auto; padding-top: 10px; } .cyt-mobilede-slider-detail-link a { display: inline-block; font-size: 0.9em; text-decoration: none; color: #0073aa; } .cyt-mobilede-slider-detail-link a:hover { text-decoration: underline; } .cyt-mobilede-slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ccc; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; line-height: 1; user-select: none; } .cyt-mobilede-slider-prev { left: 5px; } .cyt-mobilede-slider-next { right: 5px; } .cyt-mobilede-slider-nav.disabled { opacity: 0.4; cursor: default; } (function() { var slider = document.getElementById('cyt-mobilede-slider-657553'); if (!slider) return; var track = slider.querySelector('.cyt-mobilede-slider-track'); var items = slider.querySelectorAll('.cyt-mobilede-slider-item'); var prevBtn = slider.querySelector('.cyt-mobilede-slider-prev'); var nextBtn = slider.querySelector('.cyt-mobilede-slider-next'); var perPage = 3; // Desktop/Tablet: 3 Fahrzeuge pro "Seite" var index = 0; var maxIndex = Math.max(0, Math.ceil(items.length / perPage) - 1); function update() { var offset = -index * 100; // 100% = 3 Items (Desktop/Tablet) track.style.transform = 'translateX(' + offset + '%)'; if (index = maxIndex) { nextBtn.classList.add('disabled'); } else { nextBtn.classList.remove('disabled'); } } prevBtn.addEventListener('click', function() { if (index > 0) { index--; update(); } }); nextBtn.addEventListener('click', function() { if (index < maxIndex) { index++; update(); } }); update(); })();