In diesem Beitrag zeige ich Ihnen, wie Sie mit Tailwind CSS und etwas JavaScript einen modularen, responsiven Slider erstellen – ganz ohne externe Bibliotheken. Ideal für das Hyvä Theme, CMS-Seiten oder individuelle Landingpages in Ihrem Magento 2 Shop. Im Beispiel füge ich Videos in den Slider ein, es sind aber beliebige Inhalte (Downloads, Bilder, …) möglich.
Der folgende Code kann direkt in z.B. eine CMS Seite oder einen Block eingefügt werden:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<div class="relative max-w-screen-lg mx-auto"> <!-- Slider Container --> <div id="videoSlider" class="snap-x snap-mandatory flex overflow-x-auto space-x-6 py-6 scroll-smooth"> <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3"> <!-- Video 1 --> <div> <div class="aspect-video mb-2"> <iframe src="https://www.youtube-nocookie.com/embed/12345678" allowfullscreen class="w-full h-full"></iframe> </div> <h3 class="text-lg font-semibold text-white">Video 1 Titel</h3> <p class="text-sm text-white">Kurze Beschreibung zu Video 1</p> </div> <!-- Wiederholen Sie diesen Bereich so oft wie gewuenscht --> </div> <!-- Slide 2 --> <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">...</div> <!-- Slide 3 --> <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">...</div> <!-- Slide 4 --> <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">...</div> </div> <!-- Navigations Buttons --> <div class="flex justify-between mt-4"> <button onclick="moveSlide(-1)" class="bg-orange text-white px-4 py-2 rounded">Zurück</button> <button onclick="moveSlide(1)" class="bg-orange text-white px-4 py-2 rounded">Weiter</button> </div> </div> <!-- JS --> <script> const slider = document.getElementById('videoSlider'); const slides = slider.children; let currentSlide = 0; function moveSlide(direction) { const totalSlides = slides.length; currentSlide += direction; if (currentSlide < 0) currentSlide = 0; if (currentSlide >= totalSlides) currentSlide = totalSlides - 1; const target = slides[currentSlide]; target.scrollIntoView({ behavior: 'smooth', inline: 'start' }); } </script> |
Snap Slider mit Tailwind CSS für Hyvä erstellen
Sie benötigen Unterstützung bei der Umsetzung dieser Lösung oder Sie haben die passende Lösung für Ihr Magento Problem noch nicht gefunden? Kontaktieren Sie mich und ich helfe Ihnen bei Ihrem Magento Projekt!