How to implement a slideshow using slick in Rails (one by one & multiple by one)
We will show you how to implement a slideshow with slick in a Rails application.
environment
- Ruby 2.5.7
- Rails 5.2.4
Premise
--Slideshow implementation using images in the image column of the posts table
--The image uses refile
--Implement the following slide show.
Introduction of slick
Describe the following in the head and in the html file where you want to implement the slide show.
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 to application
HTML Describe the following in the html file you want to implement the slide show
<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, //Show dot navigation below slides
autoplay: true, //auto play
autoplaySpeed: 4000, //Playback speed
});
});
css Adjust the position of the next and front buttons after the slide
application.css
.slick-next {
right: 10px !important;
z-index: 100;
}
.slick-prev {
left: 10px !important;
z-index: 100;
}
That's all there is to it.
For multiple slides
If you want to make multiple slides like the one above, change the js description a bit.
js
application.js
$(function() {
$('#slider2').slick({
autoplay: true,
autoplaySpeed: 4000,
slidesToShow: 3, //Number of slides to display
slidesToScroll: 3, //Number of slides switched by scrolling
//If you want to make it responsive, also describe the following
responsive: [{
breakpoint: 768, //The following settings with a screen width of 768px
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
}]
});
});
Reference article
https://www.jungleocean.com/programming/190201jquery-slick
Recommended Posts