Rails image slides automatically [Swiper]

What you want to do

I think that images may slide automatically on common homepages. I'm going to implement that easily using "Swiper" this time. Since Swiper has download and CDN, we will implement it with CDN this time.

Implementation

Copy and read from here. 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

Example of reading with CDN

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

Basic description of HTML in Swiper

<div class="swiper-container"> 
   <!--Main display part--> 
   <div class="swiper-wrapper"> 
     <!--Each slide-->
     <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>

Adjust size with CSS

Set the size of the slider by adjusting it with CSS to <div class =" swipe-container "> that encloses the whole.

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

JavaScript description of Swiper's basic settings

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

This completes the slider that moves with the minimum functions. However, the really minimum function is "If you drag the image left and right with the mouse etc., it will move", and the left and right arrow navigation and automatic playback will not work.

Added Swiper options

We will continue to add options. There are various options, but this time I will do it.


<script>
    var mySwiper = new Swiper ('.swiper-container', {
      loop: true,         //Image loop
      effect: 'slide',    //Animation when switching
      speed: 3000,        //Image switching speed
      autoplay: {         //Move automatically
        delay: 3000,
        disableOnInteraction: true
      },
      pagination: {        //Pagination
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
      },
      navigation: {        //Navigation
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
</script>

Implementation completed

The final result is as follows.

<!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">
    <!--Main display part-->
      <div class="swiper-wrapper">
      <!--Each slide-->
        <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,        //Image loop
          effect: 'slide',   //Animation when switching
          speed: 3000,       //Image switching speed
          autoplay: {        //Move automatically
            delay: 3000,
            disableOnInteraction: true
          },
          pagination: {      //Pagination
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
          },
          navigation: {      //Navigation
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
    </script>
  </body>
</html>

end

Thank you for your hard work. If it is Rails, it should work if you copy and paste the implementation completion. Please refer to the reference link for detailed information on options. https://garigaricode.com/swiper/