[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
-
- Beginners who don't understand haml.slim
-
- People who want to introduce slick to rails but don't know how to do it
-
- 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
-
- You have already created an application with the rails new command
-
- 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
-
- Download the file from the official
-
- Put files in a specific folder in your application
-
- Make a specific description in html
- 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.
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.
Error Hello ** at ** developer mode
It seems that a description is necessary.
4-4. There is a caution mark in application.js
I can not do it. .. .. What should I do? .. ..
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