[Rails] How to easily introduce slick (slider function)

Introduction

Easy ~~? I think it can be implemented in ~~.

slick is a jQuery plugin that can add a function to display images etc. like a slide show.

This article only introduces ** implementation method ** and ** simple implementation **.

Those who say, "I want to make the site look fashionable, so please tell me something more advanced!" sorry.

It should be easy for beginners to understand because it is written in ordinary html instead of haml or slim. ..

I will also introduce the place where I first introduced it and threw an error, along with a solution.

For such a person

    1. Beginners who don't understand haml.slim
    1. People who want to introduce slick to rails but don't know how to do it
    1. A person who implemented while looking at other articles and got stuck with an error (I'm sorry if I got stuck in this article)

This time I'm using rails 5.2.4. Also, the OS is Windows, but I think it is the same for mac. (It may look a little different ...)

1. 1. Preparation for introduction

    1. You have already created an application with the rails new command
    1. The page should be displayed when you start the server in rails s (the route controller view is listed correctly)

We will continue on the premise of the above two points.

First of all, slick uses jQuery, so

Gemfile


gem "jquery-rails"

Describe and install.

Terminal


bundle install

After installing, write the following in another location.

app/assets/javascripts/application.js


Added bottom 2 lines(← I don't need Japanese characters)
//= require jquery
//= require jquery_ujs

//= require rails-ujs
//= require activestorage

//= require_tree .

I'll erase the following sentence for the time being.

//= require turbolinks

Now you are ready to go. I will introduce it at once.

2. 2. Introduce slick

    1. Download the file from the official
    1. Put files in a specific folder in your application
    1. Make a specific description in html
  1. Make a specific description in scss Since it can be introduced in three stages, I will explain it separately.

2-1. Download from official

Download the file from slick. スクリーンショット (16)_LI.jpg Click this button to start the download. (Scroll down to see the screen above)

2-2. Put in a specific folder

slick-1.8.1.zip Folder will be downloaded.

From there, go to slick-1.8.1 → slick and you will find some files. From among them ・ Slick.min.js Slick.scss Slick-theme.scss I will use three. (Only the minimum required)

File storage site
slick.min.js app/assets/javascripts/
slick.scss app/assets/stylesheets/
slick-theme.scss app/assets/stylesheets/

Please put it in the above place.

2-3. Write in html

Describe in html.

html:app/views/layouts/application.html.erb


  <head>
    <title>Title</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <!--Add the bottom two lines-->
    <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"/>
    
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

2-4. Write in scss

To import scss, write the following.

app/assets/stylesheets/application.scss


 *= require_tree .
 *= require_self
 */

*Added the following two lines
@import "slick-theme"; 
@import "slick";

This completes the introduction.

3. 3. Use slick

Now that we have introduced it, we will actually use it.

This time, we will implement the following basic functions. (See other people's articles when arranging) ・ Display dots below ・ Press the dot to slide the photo ・ Flick the image to slide

html.erb


<div class="hoge">
    <div class="nest-hoge">aaa</div>
    <div class="nest-hoge">bbb</div>
    <div class="nest-hoge">ccc</div>
</div>

The hoge and nest-hoge parts can be anything. (I don't know the naming convention for ~~ css ... ~~)

app/assets/javascripts/application.js


$(function() {
    $('.hoge').slick({
        dots: true,
    });
});

If you specify the parent class, it will work.

You have now implemented it.

4. Error collection (including my mistakes)

Finally, I would like to introduce the error that occurred when I first introduced slick.

4-1. bundle install forgot

** does not work **

I've added a gem, so let's do a bundle install.

4-2. Wrong file storage location

Put it in the right position.

** Don't put js files under stylesheets if you make a mistake **

4-3. Not described in html

I'm downloading the file and I thought I didn't need a description. スクリーンショット (18).png Error Hello ** at ** developer mode It seems that a description is necessary.

4-4. There is a caution mark in application.js

スクリーンショット (23).png

I can not do it. .. .. What should I do? .. .. スクリーンショット (25).png

Pay attention to the 18th line.

/*global $*/

It seems OK if you add.

at the end

That's it. There are various slider plugins such as sweeper as well as slick. There is also a Summary site, so please refer to it.

See you soon.

Recommended Posts

[Rails] How to easily introduce slick (slider function)
[Rails 5.x] How to introduce free fonts
How to write Rails
Introduce Vue.js to Rails
How to uninstall Rails
How to easily create a pull-down in Rails
How to make a follow function in Rails
Rails learning How to implement search function using ActiveModel
[rails] How to post images
[Rails] How to use enum
[Rails] How to install devise
[Rails] How to use enum
How to introduce Basic authentication
How to read rails routes
How to use rails join
How to terminate rails server
How to write Rails validation
How to write Rails seed
[Rails] How to use validation
[Rails] How to disable turbolinks
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Rails] How to implement scraping
[Rails] How to make seed
How to write Rails routing
[Rails] How to install simple_calendar
[Rails] How to install reCAPTCHA
[Rails] How to use Scope
[With back tricks] How to introduce React to the simplest Rails
[Rails] How to display error messages for comment function (for beginners)
[Rails] How to use gem "devise"
How to deploy jQuery on Rails
[Rails] How to install Font Awesome
[Rails] How to use flash messages
[rails] How to display db information
[Rails] How to write in Japanese
[Rails] How to prevent screen transition
How to use Ruby on Rails
Until you introduce fonts to Rails
[Rails] How to add new pages
Rails on Tiles (how to write)
[Rails] How to write exception handling?
[Rails] How to install ImageMagick (RMajick)
[Rails] How to install Font Awesome
[Rails] How to use Active Storage
[Rails] How to implement star rating
How to return Rails API mode to Rails
How to add the delete function
How to install Swiper in Rails
[Rails] How to introduce kaminari with Slim and change the design
[Rails] How to put a crown mark on the ranking function
How to implement search functionality in Rails
How to implement search function with rails (multiple columns are also supported)
How to change app name in rails
I tried to introduce CircleCI 2.0 to Rails app
How to use custom helpers in rails
[Ruby on Rails] How to use CarrierWave
How to implement a slideshow using slick in Rails (one by one & multiple by one)
[Rails] How to convert from erb to haml
[Rails] How to upload images using Carrierwave
[Java] How to use the hasNext function