[RUBY] Rails-Bild wird automatisch verschoben [Swiper]

Was willst du tun

Ich denke, dass Bilder auf gängigen Homepages automatisch verschoben werden können. Ich werde das dieses Mal einfach mit "Swiper" implementieren. Da Swiper Download und CDN hat, werden wir es dieses Mal mit CDN implementieren.

Implementierung

Kopieren und lesen Sie von hier. https://cdnjs.com/libraries/Swiper


https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js

https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.css

Beispiel für das Lesen mit CDN

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.min.css">
</head>
<body>
~ Ausgelassen ~
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js"></script>
</body>

Grundlegende Beschreibung von HTML von Swiper

<div class="swiper-container"> 
   <!--Hauptanzeigeteil--> 
   <div class="swiper-wrapper"> 
     <!--Jede Folie-->
     <div class="swiper-slide"><img src="/assets/01.jpg " alt style="width: 100%; height: 100%;"></div>
     <div class="swiper-slide"><img src="/assets/02.jpg " alt style="width: 100%; height: 100%;"></div>
     <div class="swiper-slide"><img src="/assets/03.jpg " alt style="width: 100%; height: 100%;"></div>
   </div>
   <!--Navigation-->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   <div class="swiper-pagination"></div>
</div>

Passen Sie die Größe mit CSS an

Stellen Sie die Größe des Schiebereglers ein, indem Sie den

anpassen, um das Ganze mit CSS einzuschließen.

.swiper-container{
   width: 1000px;
   height: 400px;
}

JavaScript-Beschreibung der Grundeinstellungen von Swiper

<script>
    var mySwiper = new Swiper('.swiper-container');
</script>

Dies vervollständigt den Schieberegler, der sich mit den minimalen Funktionen bewegt. Die wirklich minimale Funktion ist jedoch "Wenn Sie das Bild mit einer Maus usw. nach links und rechts ziehen, bewegt es sich", und die Navigation nach links und rechts und die automatische Wiedergabe funktionieren nicht.

Swiper-Optionen hinzugefügt

Wir werden weiterhin Optionen hinzufügen. Es gibt verschiedene Möglichkeiten, aber diesmal werde ich es tun.


<script>
    var mySwiper = new Swiper ('.swiper-container', {
      loop: true,         //Bildschleife
      effect: 'slide',    //Animation beim Umschalten
      speed: 3000,        //Bildumschaltgeschwindigkeit
      autoplay: {         //Bewegen Sie sich automatisch
        delay: 3000,
        disableOnInteraction: true
      },
      pagination: {        //Seitennummerierung
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
      },
      navigation: {        //Navigation
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
</script>

Implementierung abgeschlossen

Das Endergebnis ist wie folgt.

<!DOCTYPE html>
<html>
  <head>
    <title>Mailers</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application' %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.min.css">
  </head>
  <body>
    <div class="swiper-container">
    <!--Hauptanzeigeteil-->
      <div class="swiper-wrapper">
      <!--Jede Folie-->
        <div class="swiper-slide"><img src="/assets/01.jpg " alt style="width: 100%; height: 100%;"></div>
        <div class="swiper-slide"><img src="/assets/02.jpg " alt style="width: 100%; height: 100%;"></div>
        <div class="swiper-slide"><img src="/assets/03.jpg " alt style="width: 100%; height: 100%;"></div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-pagination"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
          loop: true,        //Bildschleife
          effect: 'slide',   //Animation beim Umschalten
          speed: 3000,       //Bildumschaltgeschwindigkeit
          autoplay: {        //Bewegen Sie sich automatisch
            delay: 3000,
            disableOnInteraction: true
          },
          pagination: {      //Seitennummerierung
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
          },
          navigation: {      //Navigation
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
    </script>
  </body>
</html>

https://garigaricode.com/swiper/