Wie kann man einen Bild-Schieberegler oder eine Slideshow erstellen

Image Slider oder Image Carousel ist eine nützliche Möglichkeit, um mehrere Bilder einer Webseite anzuzeigen. Ausgefallene Bilder können viele Besucher auf die Webseite locken.

Normalerweise werden Bildregler mithilfe von JavaScript erstellt, aber mit der Veröffentlichung von CSS3 kann das auch nur mit CSS3 erfolgen. In diesem Artikel werden wir lernen, wie der Diashow-Effekt erreicht werden kann, indem man den minimalen Code von CSS beibehält, und im zweiten Teil des Artikels werden wir die Möglichkeiten der Herstellung von Bild-Schiebern mit JavaScript betrachten.

Erstellen von Bild-Slidern nur mit CSS3

Sie haben wahrscheinlich schon sehr schwere Schieberegler auf Basis von JavaScript gesehen. Solche Schieberegler verlangsamen die Webseite und schlagen auch fehl, wenn der Benutzer die Interpretation von JavaScript im Browser deaktiviert hat. Die Nichtverwendung dieser Schieberegler ist eine Lösung für dieses Problem, aber wie würden Sie einen Schieberegler ohne JavaScript implementieren? Die Antwort auf diese Frage ist hier. Finden Sie einen geeigneten Schieberegler, der ohne JavaScript erstellt wurde.

Erfahren Sie, wie man es Schritt für Schritt machen kann:

  • Wählen Sie eine statische width und height für die Slides.
  • Platzieren Sie alle Ihre Slides nebeneinander in einem einzigen Bild.
  • Platzieren Sie das Bild als background für das Tag <div>. Verwenden Sie die Eigenschaft background-position, um die Ausgangsposition als 0px zu definieren. Achten Sie darauf, dass Sie für jede Folie messen, wo die Position sein muss, es sollen negative Zahlen sein.
  • Definieren Sie die Zeitspanne in der Animation, die für die gesamte Diashow gelten soll. Benutzen Sie dazu die Eigenschaft animation-duration.
  • Für @keyframes müssen Sie etwas rechnen. Es ist (pics * 2) / 100. Verwenden Sie dies als Multiplikator für jede Folie, wobei "100%" das letzte Keyframe ist. Jedes Bild benötigt mehrere Keyframes, um die Diashow auf dem Bild "anzuhalten".

Nun, lass uns sehen, wie es aussehen wird:

Beispiel

<!Doctype html>
<html>
  <head>
    <title>Image Slider</title>
    <style>
      body { 
      margin:10px auto;
      text-align:center; 
      }
      .content {
      max-width:800px;
      text-align:left; 
      margin:auto; 
      }
      .simple-ss {
      width:800px;
      height:250px;
      background-color: #eeeeee;
      margin:auto;
      background-image:url("https://imgur.com/download/OtK7XDW");
      animation-name: slide;
      animation-duration: 10s;
      animation-direction: normal;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      }
      @keyframes slide {
      0% {background-position:0 0;}
      16.66% {background-position:0 0;}
      33.32% {background-position:-800px 0;}
      49.98% {background-position:-800px 0;}
      66.64% {background-position:-1600px 0;}
      83.30% {background-position:-1600px 0;}
      100% {background-position:0 0;}
      }
    </style>
  </head>
  <body>
    <div class="simple-ss"></div>
    <div class="content">
      <p>Dies ist ein Proof-of-Concept für eine Diashow, die kein Javascript verwendet. Es hat keine Seiten oder linke/rechte Tasten usw.</p>
    </div>
  </body>
</html>

Hier sehen Sie ein Beispiel, wo die Hintergrundbilder so eingestellt sind, dass sie wie Schieberegler wirken:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Image Slider</title>
    <style>
      html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: "Helvetica", sans-serif;
      }
      img {
      max-width: 100%;
      }
      .slider-container {
      height: 100%;
      width: 100%;
      position: relative;
      overflow: hidden;
      text-align: center;
      }
      .menu {
      position: absolute;
      left: 0;
      z-index: 900;
      width: 100%;
      bottom: 0;
      }
      .menu label {
      cursor: pointer;
      display: inline-block;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50px;
      margin: 0 0.2em 1em;
      }
      .menu label:hover,.menu label:focus {
      background: #1c87c9;
      }
      .slide {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 100%;
      z-index: 10;
      padding: 8em 1em 0;
      background-size: cover;
      background-position: 50% 50%;
      transition: left 0s 0.75s;
      }
      [id^="slide"]:checked + .slide {
      left: 0;
      z-index: 100;
      transition: left 0.65s ease-out;
      }
      .slide-1 {
      background-image: url("/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg");
      }
      .slide-2 {
      background-image: url("/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg");
      }
      .slide-3 {
      background-image: url("/uploads/media/default/0001/03/b87b29b6ca67b64b76651037dc16f5a46e73b42a.jpeg");
      }
    </style>
  </head>
  <body>
    <div class="slider-container">
      <div class="menu">
        <label for="slide-dot-1"></label>
        <label for="slide-dot-2"></label>
        <label for="slide-dot-3"></label>
      </div>
      <input id="slide-dot-1" type="radio" name="slides" checked>
      <div class="slide slide-1"></div>
      <input id="slide-dot-2" type="radio" name="slides">
      <div class="slide slide-2"></div>
      <input id="slide-dot-3" type="radio" name="slides">
      <div class="slide slide-3"></div>
    </div>
  </body>
</html>

Ein Schieberegler hat normalerweise eine kleine Benutzeroberfläche, um zu einer bestimmten Folie zu springen, also machen wir das auch semantisch, wobei Ankerlinks zur richtigen Folie springen.

Erstellen Sie Ihre Sprunglinks mit dem Anker-Tag <a>. Fügen Sie ein wenig Styling hinzu.

Um sicherzustellen, dass Sie sowohl auf dem Desktop als auch auf dem Handy einen sanften Gleiteffekt erzielen, fügen Sie die Eigenschaft scroll-behavior mit dem Wert "smooth" hinzu.

Verwenden Sie dann die Pseudoklasse :target für etwas Besonderes auf der "aktiven" Folie. Wenn Sie auf eine der Navigationsschaltflächen für Folien klicken, wird die URL in den #-Hash umgewandelt, und dann tritt :target in Kraft.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Image Slider</title>
    <style>
      * {
      box-sizing: border-box;
      }
      .slider {
      width: 300px;
      text-align: center;
      overflow: hidden;
      }
      .slides {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      }
      .slides::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      }
      .slides::-webkit-scrollbar-thumb {
      background: #666;
      border-radius: 10px;
      }
      .slides::-webkit-scrollbar-track {
      background: transparent;
      }
      .slides > div {
      scroll-snap-align: start;
      flex-shrink: 0;
      width: 300px;
      height: 300px;
      margin-right: 50px;
      border-radius: 10px;
      background: #eee;
      transform-origin: center center;
      transform: scale(1);
      transition: transform 0.5s;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100px;
      }
      .slider > a {
      display: inline-flex;
      width: 1.5rem;
      height: 1.5rem;
      background: white;
      text-decoration: none;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin: 0 0 0.5rem 0;
      position: relative;
      }
      .slider > a:active {
      top: 1px;
      color: #1c87c9;
      }
      .slider > a:focus {
      background: #eee;
      }
      /* Don't need button navigation */
      @supports (scroll-snap-type) {
      .slider > a {
      display: none;
      }
      }
      html, body {
      height: 100%;
      overflow: hidden;
      }
      body {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to right, #1c87c9, #ffcc00);
      font-family: 'Ropa Sans', sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="slider">
      <a href="#slide-1">1</a>
      <a href="#slide-2">2</a>
      <a href="#slide-3">3</a>
      <a href="#slide-4">4</a>
      <a href="#slide-5">5</a>
      <div class="slides">
        <div id="slide-1">1</div>
        <div id="slide-2">2</div>
        <div id="slide-3">3</div>
        <div id="slide-4">4</div>
        <div id="slide-5">5</div>
      </div>
    </div>
  </body>
</html>

Slideshow oder Karussell mit CSS und JavaScript erstellen

Zuerst sollen Sie die Struktur des Bildlaufs mit HTML erstellen und Bilder platzieren.

Nachdem Sie Ihre HTML-Struktur für den Bildregler erstellt haben, ist der nächste Schritt die Verwendung von CSS-Stilen für die Benutzeroberfläche Ihres Schiebers. Fügen Sie auch Styles zu den Bildern, Hintergründen usw. hinzu. Sie müssen auch die Punkte stilisieren und Ihre Bilder über CSS-Eigenschaften ansprechend und browserfreundlich gestalten.

Nun ist es an der Zeit, den JavaScript-Teil hinzuzufügen, um die Funktionalität bereitzustellen, mit der Bilder nach einem bestimmten Zeitintervall automatisch geändert werden können.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Slideshow Images</title>
    <style>
      * {box-sizing: border-box}
      body {
      font-family: Verdana, sans-serif;
      margin:0}
      .mySlides {display: none}
      img {vertical-align: middle;}
      .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
      }
      /* Next & previous buttons */
      .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      }
      /* Position the "next button" to the right */
      .next {
      right: 0;
      border-radius: 3px 0 0 3px;
      }
      /* On hover, add a black background color with a little bit see-through */
      .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
      }
      /* Caption text */
      .text {
      color: #ffffff;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
      }
      /* Number text (1/3 etc) */
      .numbertext {
      color: #ffffff;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
      }
      /* The dots/bullets/indicators */
      .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #999999;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
      }
      .active, .dot:hover {
      background-color: #111111;
      }
      /* Fading animation */
      .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
      }
      @-webkit-keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
      }
      @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
      }
      /* On smaller screens, decrease text size */
      @media only screen and (max-width: 300px) {
      .prev, .next,.text {font-size: 11px}
      }
    </style>
  </head>
  <body>
    <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" style="width:100%">
        <div class="text">London, Ebgland</div>
      </div>
      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" style="width:100%">
        <div class="text">Sunset in Romania</div>
      </div>
      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" style="width:100%">
        <div class="text">New York, USA</div>
      </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>
    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span> 
      <span class="dot" onclick="currentSlide(2)"></span> 
      <span class="dot" onclick="currentSlide(3)"></span> 
    </div>
    <script>
      var slideIndex = 1;
      showSlides(slideIndex);
      
      function plusSlides(n) {
        showSlides(slideIndex += n);
      }
      
      function currentSlide(n) {
        showSlides(slideIndex = n);
      }
      
      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
      }
    </script>
  </body>
</html>

Um eine automatische Slideshow zu erstellen, verwenden Sie den folgenden Code:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Slideshow Images</title>
    <style>
      * {box-sizing: border-box}
      body {
      font-family: Verdana, sans-serif; 
      margin:0
      }
      .mySlides {display: none}
      img {vertical-align: middle;}
      .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
      }
      /* Next & previous buttons */
      .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      }
      /* Position the "next button" to the right */
      .next {
      right: 0;
      border-radius: 3px 0 0 3px;
      }
      /* On hover, add a black background color with a little bit see-through */
      .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
      }
      /* Caption text */
      .text {
      color: #ffffff;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
      }
      /* Number text (1/3 etc) */
      .numbertext {
      color: #ffffff;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
      }
      /* The dots/bullets/indicators */
      .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #999999;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
      }
      .active, .dot:hover {
      background-color: #111111;
      }
      /* Fading animation */
      .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
      }
      @-webkit-keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
      }
      @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
      }
      /* On smaller screens, decrease text size */
      @media only screen and (max-width: 300px) {
      .prev, .next,.text {font-size: 11px}
      }
    </style>
  </head>
  <body>
    <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" style="width:100%">
        <div class="text">London, Ebgland</div>
      </div>
      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" style="width:100%">
        <div class="text">Sunset in Romania</div>
      </div>
      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" style="width:100%">
        <div class="text">New York, USA</div>
      </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>
    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span> 
      <span class="dot" onclick="currentSlide(2)"></span> 
      <span class="dot" onclick="currentSlide(3)"></span> 
    </div>
    <script>
      var slideIndex = 0;
      showSlides();
      
      function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none"; 
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1} 
        slides[slideIndex-1].style.display = "block"; 
        setTimeout(showSlides, 2000); // Change image every 2 seconds
      }
    </script>
  </body>
</html>