How to install Swiper in Rails

environment

ruby (2.6.5) rails(6.0.0) Swiper(6.3.2)

I referred to [Official] Getting Started.

Check out this official demo (https://swiperjs.com/demos/) to see what behaviors you can implement.

Installation method

There are three types of installation methods.

a. Use Swiper from CDN

b. Download assets

c. Install from NPM

This time, I will explain how to install Swiper from the CDN of a. (What is a CDN?)


First, in the head tag of application.html.erb

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">

Or

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

Please describe.

The difference between the above two is whether to use all the features of Swiper or the minimum features. min.css is the minimum feature.

html:application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <!--abridgement-->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <!--abridgement-->
  </head>


Next, at the end of the body tag

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

Or

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Please describe. * The difference between the two is the same as before

html:application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <!--abridgement-->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <!--abridgement-->
  </head>

  <body>
    <!--abridgement-->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!--abridgement-->
  </body>
</html>

Finally, write the script at the end of the body tag.

html:application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <!--abridgement-->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <!--abridgement-->
  </head>

  <body>
    <!--abridgement-->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper('.swiper-container', {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    </script>
  </body>
</html>

By the way, this script is from Navigation in the official demo. Please change it according to the movement you want to implement.

Markup method

All you have to do is prepare the HTML and CSS of the part you want to implement.

html:example.html.erb


  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

example.css


.swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

The above is for Navigation as an example.

that's all. Thank you for visiting our website.

Recommended Posts

How to install Swiper in Rails
[Rails] How to install devise
[Rails] How to install simple_calendar
[Rails] How to install reCAPTCHA
[Ruby on Rails] How to install Bootstrap in Rails
[Rails] How to install Font Awesome
[Rails] How to write in Japanese
How to install Bootstrap in Ruby
[Rails] How to install ImageMagick (RMajick)
[Rails] How to install Font Awesome
How to introduce jQuery in Rails 6
Super easy in 2 steps! How to install devise! !! (rails 5 version)
How to implement search functionality in Rails
How to use custom helpers in rails
How to insert a video in Rails
How to use MySQL in Rails tutorial
[rails] How to configure routing in resources
How to implement ranking functionality in Rails
How to use credentials.yml.enc introduced in Rails 5.2
How to write Rails
How to install Docker
How to uninstall Rails
How to install docker-machine
How to install ngrok
[Webpacker] Summary of how to install Bootstrap and jQuery in Rails 6.0
[Rails] How to use select boxes in Ransack
How to install Titan2D (v4.2.0) in virtual environment
How to translate Rails into Japanese in general
How to prevent direct URL typing in Rails
How to separate .scss by controller in Rails
How to conditionally add html.erb class in Rails
How to implement a like feature in Rails
How to easily create a pull-down in Rails
How to use JQuery in js.erb of Rails6
How to Install Oracle JDK 1.8 in Ubuntu 18.04 LTS?
How to make a follow function in Rails
[Rails] How to use PostgreSQL in Vagrant environment
How to check Rails commands in the terminal
[rails] How to post images
[Rails] How to use enum
[Rails] How to use enum
How to read rails routes
How to install Boots Faces
How to use rails join
How to write Rails validation
[Rails] How to use validation
[Rails] How to use "kaminari"
[Rails] How to make seed
How to write Rails routing
How to install JDK8-10 (Mac)
How to set the display time to Japan time in Rails
How to implement a like feature in Ajax in Rails
[Ruby on Rails] How to write enum in Japanese
[Ruby On Rails] How to reset DB in Heroku
[How to insert a video in haml with Rails]
How to write a date comparison search in Rails
How to query Array in jsonb with Rails + postgres
[Rails 6] How to set a background image in Rails [CSS]
[Rails] How to load JavaScript in a specific view
[Rails] How to display an image in the view
[Rails] How to use gem "devise"