[RUBY] L'image des rails glisse automatiquement [Swiper]

Que veux-tu faire

Je pense que les images peuvent glisser automatiquement sur les pages d'accueil courantes. Je vais l'implémenter facilement en utilisant "Swiper" cette fois. Puisque Swiper a le téléchargement et le CDN, nous allons l'implémenter avec CDN cette fois.

la mise en oeuvre

Copiez et lisez à partir d'ici. 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

Exemple de lecture avec CDN

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

Description de base du HTML de Swiper

<div class="swiper-container"> 
   <!--Partie d'affichage principale--> 
   <div class="swiper-wrapper"> 
     <!--Chaque diapositive-->
     <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>
   <!--La navigation-->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   <div class="swiper-pagination"></div>
</div>

Ajuster la taille avec CSS

Réglez la taille du curseur en ajustant le <div class =" swipe-container "> pour entourer le tout avec CSS.

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

Description JavaScript des paramètres de base de Swiper

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

Ceci termine le curseur qui se déplace avec les fonctions minimales. Cependant, il est dans un état où la fonction minimale est vraiment "il se déplace si vous faites glisser l'image à gauche et à droite avec une souris, etc.", et la navigation avec les flèches gauche et droite et la lecture automatique ne fonctionnent pas.

Ajout d'options Swiper

Nous continuerons d'ajouter des options. Il existe différentes options, mais cette fois je le ferai.


<script>
    var mySwiper = new Swiper ('.swiper-container', {
      loop: true,         //Boucle d'image
      effect: 'slide',    //Animation lors du changement
      speed: 3000,        //Vitesse de commutation d'image
      autoplay: {         //Se déplacer automatiquement
        delay: 3000,
        disableOnInteraction: true
      },
      pagination: {        //Pagination
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
      },
      navigation: {        //La navigation
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
</script>

Mise en œuvre terminée

Le résultat final est le suivant.

<!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">
    <!--Partie d'affichage principale-->
      <div class="swiper-wrapper">
      <!--Chaque diapositive-->
        <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,        //Boucle d'image
          effect: 'slide',   //Animation lors du changement
          speed: 3000,       //Vitesse de commutation d'image
          autoplay: {        //Se déplacer automatiquement
            delay: 3000,
            disableOnInteraction: true
          },
          pagination: {      //Pagination
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
          },
          navigation: {      //La navigation
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
    </script>
  </body>
</html>

fin

Je vous remercie pour votre travail acharné. S'il s'agit de Rails, cela devrait fonctionner si vous copiez et collez l'achèvement de l'implémentation. Veuillez vous référer au lien de référence pour plus de détails sur les options. https://garigaricode.com/swiper/