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.
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.
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