I wanted to implement a slide show in a fashionable way with slick.

Introduced slick to implement slideshow

I've solved the problem, so I posted it.

environment

rails : 6.0.3.2 ruby : 2.6.6 Docker, docker-compose

Reference URL

http://kenwheeler.github.io/slick/

What is done first

Introduction of jQuery

slick introduction

Install slick body

qiita.rb


$ docker-compose run --rm web npm i slick-carousel

Somehow


40 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Added to head element of application.html.erb

qiita.rb


<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"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

js file

Since the setting of the slide display method is officially written, only a part is introduced. I think it's written differently from other people because it didn't load slick.

slideshow.js


const jQuery = require('jquery');
require('slick-carousel');
(function($) {
    $(function() {
        $('.theTarget').slick({
            dots: true,
            autoplay: true,
            fade: true,
            autoplaySpeed: 3000
        });
    })
})(jQuery);

Description of the image you want to display in the view as a slide show

ruby:show.html.erb


<div class = "theTarget">
	<%= image_tag 'abc.png' %>
	<%= image_tag 'def.png' %>
	<%= image_tag 'ghi.png' %>
	<%= image_tag 'jkl.png' %>
	<%= image_tag 'mno.png' %>
</div>

<%= javascript_pack_tag 'slideshow.js' %>  #Read js file

If you get an error reading js.

In this case, I was able to resolve the error by running bin / webpack and compiling. I don't understand webpack, so I don't know why I have to do this

qiita.rb


 % docker-compose run --rm  web bin/webpack 

Version: webpack 4.43.0
Time: 15190ms
Built at: 07/24/2020 11:18:43 PM

Recommended Posts

I wanted to implement a slide show in a fashionable way with slick.
I wanted to make (a == 1 && a == 2 && a == 3) true in Java
I just wanted to make a Reactive Property in Java
Even in Java, I want to output true with a == 1 && a == 2 && a == 3
I tried to implement a buggy web application in Kotlin
[Rails] A simple way to implement a self-introduction function in your profile
I just wanted to logrotate with log4j 2
I tried to implement ModanShogi with Kinx
How to implement a slideshow using slick in Rails (one by one & multiple by one)
I want to select multiple items with a custom layout in Dialog
Even in Java, I want to output true with a == 1 && a == 2 && a == 3 (PowerMockito edition)
I tried to build a Firebase application development environment with Docker in 2020
I want to display a PDF in Chinese (Korean) with thin reports
I thought about the best way to create a ValueObject in Ruby
I want to ForEach an array with a Lambda expression in Java
"Teacher, I want to implement a login function in Spring" ① Hello World
[Kotlin] I wanted to generate a png with a large capacity per area [Java]
I tried to implement polymorphic related in Nogizaka.
I tried to implement a function equivalent to Felica Lite with HCE-F of Android
Even in Java, I want to output true with a == 1 && a == 2 && a == 3 (Javassist second decoction)
[Go To Travel] I searched for a plan with a quo card in Jalan
I tried to implement deep learning in Java
One way to redirect_to with parameters in rails
How to implement a like feature in Rails
I wanted to gradle spring boot with multi-project
SpringSecurity I was addicted to trying to log in with a hashed password (solved)
I tried to implement a server using Netty
Since the image of the lock screen of Windows 10 is beautiful, I wanted to make it a slide show of wallpaper
I tried to break a block with java (1)
Even in Java, I want to output true with a == 1 && a == 2 && a == 3 (black magic edition)
I made a function to register images with API in Spring Framework. Part 1 (API edition)
I tried what I wanted to try with Stream softly.
How to implement UICollectionView in Swift with code only
I tried to implement file upload with Spring MVC
How to implement a like feature in Ajax in Rails
I tried to implement TCP / IP + BIO with JAVA
I tried to implement Firebase push notification in Java
I want to use a little icon in Rails
I tried to create a Clova skill in Java
I tried to make a login function in Java
[How to insert a video in haml with Rails]
Quickly implement a singleton with an enum in Java
I want to define a function in Rails Console
I tried to implement Stalin sort with Java Collector
I want to click a GoogleMap pin in RSpec
I wanted to develop PHP with vscode remote container
I tried to implement the Euclidean algorithm in Java
I made a function to register images with API in Spring Framework. Part 2 (Client Edition)
I tried to create a java8 development environment with Chocolatey
I tried to modernize a Java EE application with OpenShift.
I want to find a relative path in a situation using Path
[Rails] I tried to create a mini app with FullCalendar
[Beginner] I made a program to sell cakes in Java
I want to make a list with kotlin and java!
I want to make a function with kotlin and java!
I searched for a web framework with Gem in Ruby
A story I was addicted to in Rails validation settings
[Rails] I tried to implement batch processing with Rake task
I came across a guy with two dots in Rails
I tried to convert a string to a LocalDate type in Java
I want to create a Parquet file even in Ruby