状況
フリマのコピーアプリを作成時商品の画像を複数枚アップするように仕様変更した。その後商品画像をスライドして見れるように変更しようと思い、jQueryのプラグインであるslickをしてスライドショーを導入することとした。
jQueryの使用は初めてなので、最終的にこちらの動画を参考にした。
HTML
<!DOCTYPE html>
<html>
<head>
<#省略>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
</head>
<body>
<%= yield %>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>
</html>
Slickの導入時に出たエラー
slick.min.js:1 Uncaught ReferenceError: jQuery is not defined
at slick.min.js:1:152
at slick.min.js:1:160
このエラーは、jQueryがslick.min.js内で定義されていないために発生しているようです。
jQueryをローカルでダウンロードしていたが、webpackのenviroment.jsファイルの記述とjavascript/packs/application.jsの記述に誤りがあった模様。
enviroment.js（修正前）
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
})
)
enviroment.js（修正後）
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery', #この記述が抜けていた
})
)
javascript/packs/aplication.js（修正前）
import 'jquery'
わたしはRails6で開発中のため、参照したサイトの開発言語を確認せずにコードに書き写していたので、書き方を間違えていた模様です。
Rails6の場合は
Javascript/packs/applicarion.js（修正後）
require('jquery')
と書かなければならなかったようです。
両方を書き直したら、エラーが解消していました。
しかしスライドショーの画像がレイアウトから外れて画面左にはみ出している状況でした。その時のHTMLとCSSコードを以下に示します。
HTML
<div class="item-img-content">
<div class="item-box-img">
<% @post.images[0..-1].each do |image| %>
<%= image_tag image %>
<%end%>
</div>
</div>
CSS
-.item-img-content {
height: 50vh;
width: 60vw;
min-height: 500px;
background-color: rgb(205, 202, 202);
object-fit: contain;
.item-box-img{
width: 100%;
height: 100%;
max-height: 500px;
object-fit: contain;
}
このCSSの指定の仕方とクラス名の位置が悪さをしていたのと、SlickのCSSの読み込みが一つ足りなかった模様です。また、親要素にobject-fit:containが指定されていたのもよくなかったようです。そもそも両方に書く必要ない。
解決後のコードが以下です。
HTML
<html>
<head>
<title>Furima</title>
<%# 省略 %>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> #こちらの記述を追記
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<%# 省略 %>
</head>
<body>
<%# 省略 %>
<div class="slider">
<% @item.images[0..-1].each do |image| %>
<%= image_tag image, class: "slider-img" %>
<% end %>
</div>
<%# 省略%>
slider.js
$(document).ready(function() {
$(".slider").slick({
dots: true,
arrows: true,
});
});
show.css
.slider {
height: 50vh;
width: 60vw;
min-height: 500px;
background-color: rgb(205, 202, 202);
justify-content: center;
align-items: center;
}
.slider-img {
width: 100%;
height: 100%;
max-height: 500px;
object-fit: contain;
}
.slick-slide {
margin: 0 5px;
}
/*矢印の指定/
.slick-prev:before,
.slick-next:before {
color: rgb(205, 202, 202);
}
クラス名は何でもよかったのですが、わかりやすいようにsliderに変更しました。
無事に実装完了しました！！