Slide 1
Slide 2
Slide 3

Carousel mit Slick

Ein Carousel (Bildslider) tauscht Bilder automatisch oder auf Klick aus. Slick ist eine weit verbreitete jQuery-Bibliothek dafür.

Das Carousel befindet sich oben im <header> — es startet automatisch und wechselt alle paar Sekunden.

Konfiguration über ein JavaScript-Objekt in $('#meinSlider').slick({...}):

<!-- Slick CSS einbinden -->
<link href="slick/slick.css" rel="stylesheet">
<link href="slick/slick-theme.css" rel="stylesheet">

<!-- Container mit Slides -->
<div id="meinSlider">
  <div><img src="img/slide1.jpg" alt="Slide 1"></div>
  <div><img src="img/slide2.jpg" alt="Slide 2"></div>
</div>

<!-- jQuery + Slick JS + Initialisierung -->
<script src="jquery-latest.js"></script>
<script src="slick/slick.min.js"></script>
<script>
  $('#meinSlider').slick({
    autoplay: true,
    speed:    500
  });
</script>

Weitere Optionen unter https://kenwheeler.github.io/slick/.