ruby (2.6.5) rails(6.0.0) Swiper(6.3.2)
Ich habe auf [Official] Getting Started verwiesen.
Bitte überprüfen Sie Offizielle Demo hier, um zu sehen, welche Art von Verhalten implementiert werden kann.
Es gibt drei Arten von Installationsmethoden.
a. Use Swiper from CDN
b. Download assets
c. Install from NPM
Dieses Mal werde ich erklären, wie Swiper vom CDN eines installiert wird. (Was ist CDN?)
Zunächst im Head-Tag von application.html.erb
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
Oder
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
Bitte beschreiben.
Der Unterschied zwischen den beiden oben genannten besteht darin, ob alle Funktionen von Swiper oder die Mindestfunktionen verwendet werden sollen. min.css ist die Mindestfunktion.
html:application.html.erb
<!DOCTYPE html>
<html>
<head>
<!--Kürzung-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!--Kürzung-->
</head>
Als nächstes am Ende des Body-Tags
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
Oder
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
Bitte beschreiben. * Der Unterschied zwischen den beiden ist der gleiche wie zuvor
html:application.html.erb
<!DOCTYPE html>
<html>
<head>
<!--Kürzung-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!--Kürzung-->
</head>
<body>
<!--Kürzung-->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!--Kürzung-->
</body>
</html>
Schreiben Sie abschließend das Skript am Ende des Body-Tags.
html:application.html.erb
<!DOCTYPE html>
<html>
<head>
<!--Kürzung-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!--Kürzung-->
</head>
<body>
<!--Kürzung-->
<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>
Dieses Skript stammt übrigens von Navigation in der offiziellen Demo. Bitte ändern Sie es entsprechend der Bewegung, die Sie implementieren möchten.
Sie müssen lediglich HTML und CSS für den Teil vorbereiten, den Sie implementieren möchten.
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;
}
Das Obige gilt als Beispiel für Navigation.
das ist alles. Vielen Dank für Ihren Besuch auf unserer Website.
Recommended Posts