[Ruby on Rails] Image slideshow using Skippr



Development environment

ruby 2.5.7 Rails OS: macOS Catalina


-Build login environment with devise -Posting function that only logged-in users can do -Post editing function (update, delete)

Supplement rails g devise: install does the initial setup of devise.


1 Introduction of gem 2 Download the file from the Skippr site 3 Actual code

Introduction of gem

Enables jquery to be used in Rails.


gem 'jquery-rails'


$ bundle insatll


//=require jquery ← added
//= require jquery_ujs ← added
//= require activestorage
//= require turbolinks
//= require_tree .

Download the file from the Skippr site

Official site http://austenpayan.github.io/skippr/

Click on Github here to download the ZIP file. スクリーンショット 2020-10-15 13.20.39.png スクリーンショット 2020-10-15 13.22.35.png

After decompressing, save as follows.

--The skippr.min.js file is in the app / assets / javascripts folder --Skippr.css file is in the app / assets / stylesheets folder スクリーンショット 2020-10-15 13.25.43.png

Actual code

Save image1.jpg to image4.jpg in app / assets / images.


<div id="box">
  <div id="images">
    <div class="image1"></div>
    <div class="image2"></div>
    <div class="image3"></div>
    <div class="image4"></div>


/*The image is displayed by specifying the height*/
  height: 600px;
.image1 {
  background-image: url(image1.jpg);
.image2 {
  background-image: url(image2.jpg);
.image3 {
  background-image: url(image3.jpg);
.image4 {
  background-image: url(image4.jpg);


$(document).ready(function () {
    //Slideshow changes("fade" or "slide")
    transition : 'slide',
    //Time to change(millisecond)
    speed : 1000,
    //Types of easing
    easing : 'easeOutQuart',
    //Navigation form("block" or "bubble")
    navType : 'block',
    //Type of child element("div" or "img")
    childrenElementType : 'div',
    //Displaying navigation arrows(Show as true)
    arrows : true,
    //Automatic playback of slideshow(No autoplay with false)
    autoPlay : true,
    //Slide switching interval during automatic playback(millisecond)
    autoPlayDuration : 3000,
    //Setting slide feed with arrow keys on the keyboard(Valid with true)
    keyboardOnAlways : true,
    //Whether to display the back arrow when displaying the first slide(Hide with false)
    hidePrevious : false


Although relatively easy to install, It may not work when combined with bootstrap, so In that case, please refer to here. [Ruby on Rails] Carousel of bootstrap4 is implemented with each method using each method

Also, on twitter, technologies and ideas that are not uploaded to Qiita are also uploaded, so I would be grateful if you could follow me. Click here for details https://twitter.com/japwork

Recommended Posts