Huhu Ihr Lieben, wir möchte gerne mehrere Slider untereinander auf die Startseite setzen und so soll das sinngemäß aussehen: Den Anhang 38088 betrachten (Wenn wir schon so weit wären...) Hintergrund ist, daß wir die Sprengzeichnungen (auch Schnitt- oder Exposionszeichnung genannt) zum einfacheren Verständnis für den Laien aufgebereitet haben, damit dieser seine Wunschartikel einfacher findet. Hat Kunde sein Wunschartikel in Zeichnung gefunden, so kann er diese anklicken und wird auf eine ImageMap weitergeleitet.... Wir glauben, daß dieses Einkaufserlebnis zu einer schnellen und zügigen Bestellung führt - ohne lange über Suchbegriffe suchen zu müssen. Die tägliche Erfahrung hat gezeigt, daß wir zwar alle das Gleiche meinen, jedoch beschreibt es jeder anders => Chaos perfekt. Wie bekommen wie die Slider so auf die Startseite? Wie können wir das umsetzen? Die Slidererklärung im Handbuch paßt nicht ganz zu dem, was wir vorhaben... Auch soll der Slider starr sein und nicht automatisch "laufen". Der Kunde soll aktiv damit scrollen. So können wir ihn auch länger auf unserer Seite halten... Merci im Voraus für eine Lösung. Viele Grüße wünscht Britta
Mit Widgets und Lauftext könnte das gehen. Dazu gibt es auch eine Anleitung hier im Forum , meine ich. Hier ist so ein Generator: (Link nur für registrierte Nutzer sichtbar.) Das hier ist zwar nur bedingt eine anleitung dafür, aber man sieht hier sehr schön, wie das mit den Links und Bildern geschrieben werden muss. Außerdem könnte der Hinweis im letzten Post hilfreich sein.
Versuche es mal mit diesem Code: Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teaser Slider mit Bildergalerie</title> <style> /* Stil für den Container */ .slider-container { display: flex; flex-direction: column; align-items: center; } /* Stil für die einzelnen Teaser-Slider */ .teaser-slider { width: 300px; height: 200px; border: 1px solid #ccc; margin: 10px; overflow: hidden; position: relative; } /* Stil für die Bilder innerhalb der Teaser-Slider */ .teaser-slider img { width: 100%; height: 100%; object-fit: cover; } /* Stil für die Pfeil-Navigation */ .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; width: 100%; padding: 10px; } .slider-nav button { background: none; border: none; font-size: 20px; cursor: pointer; } </style> </head> <body> <div class="slider-container"> <!-- Erster Teaser-Slider --> <div class="teaser-slider"> <div class="slider-nav"> <button id="prev1" onclick="prevSlide(1)">❮</button> <button id="next1" onclick="nextSlide(1)">❯</button> </div> <img src="bild1_1.jpg" alt="Teaser 1 - Bild 1"> <h2>Teaser 1</h2> <p>Beschreibung des ersten Teasers.</p> </div> <!-- Zweiter Teaser-Slider --> <div class="teaser-slider"> <div class="slider-nav"> <button id="prev2" onclick="prevSlide(2)">❮</button> <button id="next2" onclick="nextSlide(2)">❯</button> </div> <img src="bild2_1.jpg" alt="Teaser 2 - Bild 1"> <h2>Teaser 2</h2> <p>Beschreibung des zweiten Teasers.</p> </div> <!-- Dritter Teaser-Slider --> <div class="teaser-slider"> <div class="slider-nav"> <button id="prev3" onclick="prevSlide(3)">❮</button> <button id="next3" onclick="nextSlide(3)">❯</button> </div> <img src="bild3_1.jpg" alt="Teaser 3 - Bild 1"> <h2>Teaser 3</h2> <p>Beschreibung des dritten Teasers.</p> </div> </div> <script> // JavaScript für die Bildergalerie let slideIndex = [1, 1, 1]; function showSlides(n, sliderNumber) { const slides = document.querySelectorAll(`.teaser-slider:nth-child(${sliderNumber}) img`); if (n > slides.length) { slideIndex[sliderNumber - 1] = 1 } if (n < 1) { slideIndex[sliderNumber - 1] = slides.length } slides.forEach(slide => slide.style.display = 'none'); slides[slideIndex[sliderNumber - 1] - 1].style.display = 'block'; } function prevSlide(sliderNumber) { showSlides(slideIndex[sliderNumber - 1] -= 1, sliderNumber); } function nextSlide(sliderNumber) { showSlides(slideIndex[sliderNumber - 1] += 1, sliderNumber); } // Initial die ersten Bilder anzeigen showSlides(1, 1); showSlides(1, 2); showSlides(1, 3); </script> </body> </html>