[RUBY] 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

Premise

--Slideshow implementation using images in the image column of the posts table --The image uses refile --Implement the following slide show. スライドショー.gif

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

スライドショー2.gif 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

How to implement a slideshow using slick in Rails (one by one & multiple by one)
How to implement a like feature in Rails
How to implement a like feature in Ajax in Rails
How to implement a circular profile image in Rails using CarrierWave and R Magick
How to insert a video in Rails
How to implement ranking functionality in Rails
How to implement image posting using rails
[Rails] How to create a graph using lazy_high_charts
How to create a query using variables in GraphQL [Using Ruby on Rails]
[Rails] How to log in with a name by adding a devise name column
How to implement more than one top page in Rails breadcrumb trail
How to separate .scss by controller in Rails
[Rails] How to upload multiple images using Carrierwave
How to easily create a pull-down in Rails
How to make a follow function in Rails
How to implement image posting function using Active Storage in Ruby on Rails
[Rails] How to search by multiple values ​​with LIKE
How to implement guest login in 5 minutes in rails portfolio
[How to insert a video in haml with Rails]
How to write a date comparison search in Rails
How to convert A to a and a to A using AND and OR in Java
[Rails 6] How to set a background image in Rails [CSS]
Rails learning How to implement search function using ActiveModel
[Rails] How to load JavaScript in a specific view
[Rails] How to install a decorator using gem draper
[Rails] How to implement scraping
How to deploy jQuery in your Rails app using Webpacker
[Rails] How to delete images uploaded by carrierwave (using devise)
How to select a specified date by code in FSCalendar
How to display a graph in Ruby on Rails (LazyHighChart)
Establish a search bar in Rails ~ Join multiple tables to search
[Rails] How to write in Japanese
Implement a contact form in Rails
How to introduce jQuery in Rails 6
[Rails] How to implement star rating
How to install Swiper in Rails
[Rails] A simple way to implement a self-introduction function in your profile
[Rails 6] How to create a dynamic form input screen using cocoon
How to implement a job that uses Java API in JobScheduler
How to write ruby if in one line Summary by beginner
How to rename a model with foreign key constraints in Rails
How to implement UI automated test using image comparison in Selenium
[rails6.0.0] How to save images using Active Storage in wizard format
How to execute a contract using web3j
How to sort a List using Comparator
How to implement date calculation in Java
How to implement Kalman filter in Java
How to change app name in rails
How to use custom helpers in rails
[Rails] How to upload images using Carrierwave
How to use MySQL in Rails tutorial
How to implement coding conventions in Java
Steps to set a favicon in Rails
[rails] How to configure routing in resources
[rails] How to create a partial template
[Swift5] How to implement animation using "lottie-ios"
How to implement asynchronous processing in Outsystems
How to publish a library in jCenter
How to use credentials.yml.enc introduced in Rails 5.2
[Rails] How to handle data using enum
Implement button transitions using link_to in Rails