[RUBY] So implementieren Sie eine Diashow mit Slick in Rails (einzeln und mehrfach nacheinander)
Wir zeigen Ihnen, wie Sie eine Diashow mit Slick in einer Rails-Anwendung implementieren.
Umgebung
- Ruby 2.5.7
- Rails 5.2.4
Annahme
--Die Diashow-Implementierung mithilfe von Bildern in der Bildspalte der Beitragstabelle
- Das Bild verwendet Refile
- Implementieren Sie die folgende Diashow.
Einführung von Slick
Beschreiben Sie Folgendes im Kopf und in der HTML-Datei, in der Sie die Diashow implementieren möchten.
html:application.html.erb
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
</head>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
Beschreibung zur Anwendung
HTML Beschreiben Sie Folgendes in der HTML-Datei, in der Sie die Diashow implementieren möchten
<div id="slider">
<% @posts.each do |post| %>
<%= attachment_image_tag post, :image, :fill, 1200, 800, format: "jpeg" %>
<% end %>
</div>
js
application.js
$(function() {
$('#slider').slick({
dots: true, //Punktnavigation unter der Folie anzeigen
autoplay: true, //automatisches Abspielen
autoplaySpeed: 4000, //Wiedergabegeschwindigkeit
});
});
css Passen Sie die Position der nächsten und vorderen Tasten nach der Folie an
application.css
.slick-next {
right: 10px !important;
z-index: 100;
}
.slick-prev {
left: 10px !important;
z-index: 100;
}
Dies ist abgeschlossen.
Für mehrere Folien
Wenn Sie mehrere Folien wie oben erstellen, ändern Sie die Beschreibung von js ein wenig.
js
application.js
$(function() {
$('#slider2').slick({
autoplay: true,
autoplaySpeed: 4000,
slidesToShow: 3, //Anzahl der anzuzeigenden Folien
slidesToScroll: 3, //Anzahl der Folien, die durch Scrollen gewechselt werden sollen
//Wenn Sie darauf reagieren möchten, beschreiben Sie auch Folgendes
responsive: [{
breakpoint: 768, //Die folgenden Einstellungen mit einer Bildschirmbreite von 768px
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
}]
});
});
Referenzartikel
https://www.jungleocean.com/programming/190201jquery-slick
Recommended Posts