slickによるスライドショー

 画像のスライドショー実装の為にslickを導入

バージョン

Ruby 2.6.5

Rails 6.0.3.5

 

jQuery導入

yarnでjQueryの導入

% yarn add jquery

 

webpackの編集

config/webpack/environment.js

 
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
})
)
module.exports = environment

 

javascriptにjqueryの記載

app/javascript/packs/application.js/

require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../card")
require("jquery")

 

 slick導入

app/views/layouts/application.html.erb

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript"
src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

application.html.erbのhead内に記載

書き方はslickの公式ページ（http://kenwheeler.github.io/slick/）を参照

slick.css、slick-theme、slick.min.jsのファイルを使用

 

viewの記載

app/views/layouts/application.html.erb

<div class="title-contents">
<div class="slider">
<%= link_to image_tag("top1.png", class:"top-contents"), "#" %>
<%= link_to image_tag("top2.png", class:"top-contents"), "#" %>
</div>
</div>

 

slick用JSファイルの作成

app/javascript/slick.js

$(function(){
$(".slider").slick({
prevArrow: '<i class="fas fa-angle-left"></i>',
nextArrow: '<i class="fas fa-angle-right"></i>',

autoplay:true　#自動スライドの適応の場合記載
})
});

シンボルとしてfont awesomeを使用

 

CSSを例として記載

.fa-angle-left {
font-size: 8vw;
position: absolute;
z-index: 100;
top: 19vw;
left: 2vw;
color: #ff6600
}

.fa-angle-right {
font-size: 8vw;
position: absolute;
z-index: 100;
right: 2vw;
top: 19vw;
color: #ff6600
}

 

位置などは仕様によって調整