Carousel-Slider mit mehreren Slides nebeneinander

Carousel-Slider mit HTML und CSS (SCSS)

Verwendbar in Gambio-Shops, WordPress-Webseiten, individuellen HTML-Webanwendungen etc.

Ohne jQuery, ohne Javascript, ohne Plugin, ohne Frameworks, ohne Libraries

Ein Carousel-Slider wird oft für Bilder, Posts oder Rezensionen verwendet. Dabei wechseln die Slides automatisch, zeitlich gesteuert, um alle Einträge anzuzeigen. Die Slides werden in diesem Beispiel links aus dem Fenster geschoben und beim letzten Slide wird automatisch auf den ersten Eintrag zurück gescrollt.

Bei dem responsive Slider kann die Anzahl Slides für jede Gerätegröße eingestellt werden: z.B. auf einem Desktop vier Slides nebeneinander, auf dem Tablet zwei Slides und auf dem Smartphone ein Slide mit Animation als Carousel-Slider.

Erstellt ist diese Carousel-Slider-Variante mit HTML und CSS, ohne Javascript, jQuery, WordPress-Plugin, Bootstrap oder sonstigen Frameworks und Libraries und kann damit in jeder Website oder Shop-Software (z.B. Gambio) verwendet werden, in der man HTML und Stylesheets einfügen kann.

CSS-Animation und Keyframes

Realisiert werden die Shifts mit CSS-Animation und Keyframes abhängig von der Gerätegröße (Desktop, Tablet oder Smartphone). Dadurch unterscheiden sich die Anzahl Shifts vor dem Zurückscrollen zwischen den verschiedenen Geräten. Bei 10 Slides insgesamt und 4 Slides nebeneinander auf einem Desktop, sind 6 Shifts nötig bevor auf den ersten Slide zurück gescrollt wird, auf dem Smartphone mit nur 1 Slide sind 10 Shifts nötig.

Item 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Carousel-Slider für Google Rezensionen

Diese responsive Carousel-Slider-Lösung habe ich für Google Rezensionen in einem Gambio-Shop verwendet:

Gambio Shop Kerzenparadies Jess

HTML-Code für Carousel-Slider

Der HTML-Code ist überschaubar und kann natürlich mit der gewünschten Anzahl Slides ergänzt werden:

<div class="bt_carousel">
     <div class="bt_carousel-items">

         <div class="bt_carousel-item">
            <div class="bt_carousel-item-content">
                 <h3>Item 1</h3>
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
         </div>

         <div class="bt_carousel-item">
            <div class="bt_carousel-item-content">
                 <h3>Item 2</h3>
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
         </div>

         <div class="bt_carousel-item">
            <div class="bt_carousel-item-content">
                 <h3>Item 3</h3>
                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
         </div>
.
.
.
     </div>
</div>

CSS-Code (Stylesheets) für Carousel-Slider

Dieser CSS-Code ist für 10 Slides mit einer Slide-Breite von 300px. Auf dem Desktop werden 4 Slides, auf dem Tablet 2 und auf dem Smartphone ein Slide nebeneinander angezeigt. Die Animiationsdauer bis zum Neustart ist auf 20 Sekunden gesetzt. Bei Mouseover wird die Animation angehalten.

/* CSS für Responsive-Carousel-Slider */
/* keyframes */
@keyframes autoplay {
  0% {
    transform: translateX(0px);
  }
  5% {
    transform: translateX(0px);
  }
  10% {
    transform: translateX(-300px);
  }
  15% {
    transform: translateX(-300px);
  }
  20% {
    transform: translateX(-600px);
  }
  25% {
    transform: translateX(-600px);
  }
  30% {
    transform: translateX(-900px);
  }
  35% {
    transform: translateX(-900px);
  }
  40% {
    transform: translateX(-1200px);
  }
  45% {
    transform: translateX(-1200px);
  }
  50% {
    transform: translateX(-1500px);
  }
  55% {
    transform: translateX(-1500px);
  }
  60% {
    transform: translateX(-1800px);
  }
  65% {
    transform: translateX(-1800px);
  }
  70% {
    transform: translateX(-2100px);
  }
  75% {
    transform: translateX(-2100px);
  }
  80% {
    transform: translateX(-2400px);
  }
  85% {
    transform: translateX(-2400px);
  }
  90% {
    transform: translateX(-2700px);
  }
  95% {
    transform: translateX(-2700px);
  }
  100% {
    transform: translateX(0px);
  }
}
@media (min-width: 768px) {
  @keyframes autoplay {
    0% {
      transform: translateX(0px);
    }
    5% {
      transform: translateX(0px);
    }
    11.25% {
      transform: translateX(-300px);
    }
    16.25% {
      transform: translateX(-300px);
    }
    22.5% {
      transform: translateX(-600px);
    }
    27.5% {
      transform: translateX(-600px);
    }
    33.75% {
      transform: translateX(-900px);
    }
    38.75% {
      transform: translateX(-900px);
    }
    45% {
      transform: translateX(-1200px);
    }
    50% {
      transform: translateX(-1200px);
    }
    56.25% {
      transform: translateX(-1500px);
    }
    61.25% {
      transform: translateX(-1500px);
    }
    67.5% {
      transform: translateX(-1800px);
    }
    72.5% {
      transform: translateX(-1800px);
    }
    78.75% {
      transform: translateX(-2100px);
    }
    83.75% {
      transform: translateX(-2100px);
    }
    90% {
      transform: translateX(-2400px);
    }
    95% {
      transform: translateX(-2400px);
    }
    100% {
      transform: translateX(0px);
    }
  }
}
@media (min-width: 992px) {
  @keyframes autoplay {
    0% {
      transform: translateX(0px);
    }
    5% {
      transform: translateX(0px);
    }
    12.8571428571% {
      transform: translateX(-300px);
    }
    17.8571428571% {
      transform: translateX(-300px);
    }
    25.7142857143% {
      transform: translateX(-600px);
    }
    30.7142857143% {
      transform: translateX(-600px);
    }
    38.5714285714% {
      transform: translateX(-900px);
    }
    43.5714285714% {
      transform: translateX(-900px);
    }
    51.4285714286% {
      transform: translateX(-1200px);
    }
    56.4285714286% {
      transform: translateX(-1200px);
    }
    64.2857142857% {
      transform: translateX(-1500px);
    }
    69.2857142857% {
      transform: translateX(-1500px);
    }
    77.1428571429% {
      transform: translateX(-1800px);
    }
    82.1428571429% {
      transform: translateX(-1800px);
    }
    90% {
      transform: translateX(-2100px);
    }
    95% {
      transform: translateX(-2100px);
    }
    100% {
      transform: translateX(0px);
    }
  }
}
@media (min-width: 1300px) {
  @keyframes autoplay {
    0% {
      transform: translateX(0px);
    }
    5% {
      transform: translateX(0px);
    }
    15% {
      transform: translateX(-300px);
    }
    20% {
      transform: translateX(-300px);
    }
    30% {
      transform: translateX(-600px);
    }
    35% {
      transform: translateX(-600px);
    }
    45% {
      transform: translateX(-900px);
    }
    50% {
      transform: translateX(-900px);
    }
    60% {
      transform: translateX(-1200px);
    }
    65% {
      transform: translateX(-1200px);
    }
    75% {
      transform: translateX(-1500px);
    }
    80% {
      transform: translateX(-1500px);
    }
    90% {
      transform: translateX(-1800px);
    }
    95% {
      transform: translateX(-1800px);
    }
    100% {
      transform: translateX(0px);
    }
  }
}
.bt_carousel {
  width: 300px;
  display: flex;
  overflow: hidden;
  margin: 30px auto;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .bt_carousel {
    width: 600px;
  }
}
@media (min-width: 992px) {
  .bt_carousel {
    width: 900px;
  }
}
@media (min-width: 1300px) {
  .bt_carousel {
    width: 1200px;
  }
}
.bt_carousel-items {
  display: flex;
  animation: 20s autoplay infinite ease-in-out;
  animation-delay: 0s;
}

.bt_carousel-items:hover {
  animation-play-state: paused;
}

.bt_carousel-item {
  flex: 0 0 auto;
  margin-right: 10px;
  width: 290px;
  height: 400px;
  box-sizing: border-box;
  background: #fafafb;
  padding: 20px;
  border-radius: 8px;
}

SCSS-Code (SASS) für Carousel-Slider

Die Anpassungen am CSS-Code sind sehr aufwändig, wenn ein Slide hinzugefügt oder entfernt werden soll. Daher gibt es hier die Lösung mit SCSS für die Kompilierung mit dem SASS-Präprozessor (z.B. Online-SASS-Compiler). In der SCSS-Datei werden die Keyframes mit for-Schleifen abhängig von der über Variablen vorgegebenen Anzahl Slides und Slide-Breite erstellt.

/* CSS für Responsive-Carousel-Slider */

$anzahl-slides: 10;                       // Anzahl Slides insgesamt
$ani-duration: 20;                        // Dauer der Animation in Sekunden

$slide-width: 300;                        // px
$slide-mr: 10;                            // px margin-right vom Slide

$dauer: 5;                                // wie lange ein Slide angezeigt wird (100 entspricht der ani-duration)
$dauer-proz: $dauer * 1%;                 // Prozent
$spanne-slides: 100 - (2 * $dauer);       // Prozent

$min-width-lg: 1300px;                    // Breakpoint Desktop (lg)
$min-width-md: 992px;                     // Breakpoint Desktop (md)
$min-width-sm: 768px;                     // Breakpoint Tablet

$slides-lg: 4;                            // Anzahl Slides auf Desktop (lg)
$slides-md: 3;                            // Anzahl Slides auf Desktop (md)
$slides-sm: 2;                            // Anzahl Slides auf Tablet
$slides-xs: 1;                            // Anzahl Slides auf Smartphone

$shifts-lg: $anzahl-slides - $slides-lg;
$shifts-md: $anzahl-slides - $slides-md;
$shifts-sm: $anzahl-slides - $slides-sm;
$shifts-xs: $anzahl-slides - $slides-xs;

/* keyframes */

@keyframes autoplay {
     0% { transform: translateX(0px) }
     #{$dauer-proz} { transform: translateX(0px) }

@for $i from 1 through $shifts-xs {
     $proz-start: $spanne-slides / $shifts-xs * $i * 1%;
     $proz-ende: $proz-start + $dauer;
     #{$proz-start} { transform: translateX( -1px * $i * $slide-width ) }
     #{$proz-ende} { transform: translateX( -1px * $i * $slide-width ) }
}

     100% {transform: translateX(0px)}
}
@media (min-width: $min-width-sm) {
   @keyframes autoplay {
     0% { transform: translateX(0px) }
     #{$dauer-proz} { transform: translateX(0px) }

@for $i from 1 through $shifts-sm {
     $proz-start: $spanne-slides / $shifts-sm * $i * 1%;
     $proz-ende: $proz-start + $dauer;
     #{$proz-start} { transform: translateX( -1px * $i * $slide-width ) }
     #{$proz-ende} { transform: translateX( -1px * $i * $slide-width ) }
}

        100% {transform: translateX(0px)}
   }
}
@media (min-width: $min-width-md){
   @keyframes autoplay {
     0% { transform: translateX(0px) }
     #{$dauer-proz} { transform: translateX(0px) }

@for $i from 1 through $shifts-md {
     $proz-start: $spanne-slides / $shifts-md * $i * 1%;
     $proz-ende: $proz-start + $dauer;
     #{$proz-start} { transform: translateX( -1px * $i * $slide-width ) }
     #{$proz-ende} { transform: translateX( -1px * $i * $slide-width ) }
}

        100% {transform: translateX(0px)}
   }
}
@media (min-width: $min-width-lg){
   @keyframes autoplay {
     0% { transform: translateX(0px) }
     #{$dauer-proz} { transform: translateX(0px) }

@for $i from 1 through $shifts-lg {
     $proz-start: $spanne-slides / $shifts-lg * $i * 1%;
     $proz-ende: $proz-start + $dauer;
     #{$proz-start} { transform: translateX( -1px * $i * $slide-width ) }
     #{$proz-ende} { transform: translateX( -1px * $i * $slide-width ) }
}

     100% {transform: translateX(0px)}
   }
}

.bt_carousel{
  width: $slide-width * $slides-xs * 1px;
  display: flex;
  overflow: hidden;
  margin: 30px auto;
  box-sizing: border-box;
}
@media (min-width: $min-width-sm){
   .bt_carousel{
     width: $slide-width * $slides-sm * 1px;
   }
}
@media (min-width: $min-width-md){
   .bt_carousel{
     width: $slide-width * $slides-md * 1px;
   }
}
@media (min-width: $min-width-lg){
   .bt_carousel{
     width: $slide-width * $slides-lg * 1px;
   }
}
.bt_carousel-items{
  display: flex;
  animation: $ani-duration * 1s autoplay infinite ease-in-out;
  animation-delay: 0s;
}
.bt_carousel-items:hover {
    animation-play-state: paused;
}
.bt_carousel-item {
  flex: 0 0 auto;
  margin-right: $slide-mr + 0px;
  width: $slide-width - $slide-mr + 0px;
  height: 400px;
  box-sizing: border-box;
  background: #fafafb;
  padding: 20px;
  border-radius: 8px;
}

Kostenloser Download

HTML, CSS und SCSS-Code

Die ZIP-Datei zum Download beinhaltet vier Dateien für den responsiven Carousel-Slider. Zusätzlich zu der HTML, CSS und SCSS-Datei enthält die ZIP-Datei eine LibreOffice-Datei zum Erstellen der Keyframes abhängig von der Anzahl Slides nebeneinander, der Slidebreite und für die responive Darstellung, wenn die CSS-Variante ohne SASS-Kompilierung verwendet wird.

Download Responsive Carousel-Slider HTML, CSS und SCSS-Code

Hilfreiche und interessante Links

Eine super hilfreiche und verständliche Anleitung für die SASS-Compiler-Installation und Verwendung, mit einer Einführung in SASS für 2,– Euro (Stand 01.11.2023):

https://shop.kulturbanause.de/produkt/web-design-mit-sass-eine-einfuehrung-in-moderne-stylesheets/
Wer den SASS-Compiler nicht installieren möchte, aber Anpassungen an dem CSS-Code benötigt, kann auch einen Online-SASS-Compiler verwenden, z.B.:

https://sass.js.org/
Responsive Image-Slider mit 1 Slide (full-width) mit HTML und CSS

https://www.bt-webdesign.de/image-slider-carousel-mit-css-anmiation/

Fragen, Wünsche und Anregungen zu dem Carousel-Slider mit HTML und CSS/SCSS?

Senden Sie mir eine Nachricht an info@bt-webdesign.de