[RUBY] Comment mettre en œuvre un diaporama en utilisant Slick in Rails (un par un et plusieurs par un)
Nous allons vous montrer comment implémenter un diaporama avec slick dans une application Rails.
environnement
- Ruby 2.5.7
- Rails 5.2.4
supposition
--Implémentation du diaporama à l'aide d'images dans la colonne d'image de la table des articles
- L'image utilise refile
--Mettez en œuvre le diaporama suivant.
Introduction de slick
Décrivez ce qui suit dans l'en-tête et dans le fichier html où vous souhaitez implémenter le diaporama.
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>
Description de l'application
HTML Décrivez ce qui suit dans le fichier html pour lequel vous souhaitez implémenter le diaporama
<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, //Afficher la navigation par points sous la diapositive
autoplay: true, //lecture automatique
autoplaySpeed: 4000, //Vitesse de lecture
});
});
css Ajustez la position des boutons suivant et avant après la diapositive
application.css
.slick-next {
right: 10px !important;
z-index: 100;
}
.slick-prev {
left: 10px !important;
z-index: 100;
}
C'est tout ce qu'on peut en dire.
Pour plusieurs diapositives
Lorsque vous créez plusieurs diapositives comme ci-dessus, modifiez un peu la description de js.
js
application.js
$(function() {
$('#slider2').slick({
autoplay: true,
autoplaySpeed: 4000,
slidesToShow: 3, //Nombre de diapositives à afficher
slidesToScroll: 3, //Nombre de diapositives à basculer par défilement
//Si vous souhaitez le rendre réactif, décrivez également les éléments suivants
responsive: [{
breakpoint: 768, //Les paramètres suivants avec une largeur d'écran de 768 px
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
}]
});
});
Article de référence
https://www.jungleocean.com/programming/190201jquery-slick
Recommended Posts