ruby (2.6.5) rails(6.0.0) Swiper(6.3.2)
J'ai fait référence à [Official] Getting Started.
Veuillez consulter Démo officielle ici pour voir quel type de comportement peut être implémenté.
Il existe trois types de méthodes d'installation.
a. Use Swiper from CDN
b. Download assets
c. Install from NPM
Cette fois, je vais vous expliquer comment installer Swiper à partir du CDN d'un. (Qu'est-ce que CDN?)
Tout d'abord, dans la balise head de application.html.erb
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
Ou
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
Décrivez s'il vous plait.
La différence entre les deux ci-dessus est d'utiliser toutes les fonctionnalités de Swiper ou les fonctionnalités minimales. min.css est la fonction minimale.
html:application.html.erb
<!DOCTYPE html>
<html>
<head>
<!--réduction-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!--réduction-->
</head>
Ensuite, à la fin de la balise body
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
Ou
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
Décrivez s'il vous plait. * La différence entre les deux est la même qu'avant
html:application.html.erb
<!DOCTYPE html>
<html>
<head>
<!--réduction-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!--réduction-->
</head>
<body>
<!--réduction-->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!--réduction-->
</body>
</html>
Enfin, écrivez le script à la fin de la balise body.
html:application.html.erb
<!DOCTYPE html>
<html>
<head>
<!--réduction-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!--réduction-->
</head>
<body>
<!--réduction-->
<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>
Au fait, ce script provient de Navigation dans la démo officielle. Veuillez le modifier en fonction du mouvement que vous souhaitez mettre en œuvre.
Tout ce que vous avez à faire est de préparer le HTML et le CSS pour la partie que vous souhaitez implémenter.
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;
}
Ce qui précède est pour Navigation à titre d'exemple.
c'est tout. Merci de visiter notre site.
Recommended Posts