slickを使ったスライダーの実装

【rails】jqueryとslickを使ったスライダーの実装

railsでアパレルWEBサイトを作成しています。
トップページのバナーをslickを使って実装したいのですが用意したバナーが上手く反映されません。

こちらの記事を参考にしています。
https://qiita.com/milneo/items/3560cb01cba92c2ccb6f

どなたかご教授お願いいたします。

###私が行った実装手順
１.slickをダウンロードして以下のファイルを所定の位置に配置しました。
app/assets/stylesheets
slick-theme.scss
slick.scss

app/assets/javascript
slick.min.js

2.cssとjsをlayouts/application.html.erbに記述

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

3.jqueryを導入,ターミナルでbundle install

gem 'jquery-rails'

4.javascript/packs/application.jsに下記を記述

require("jquery")
require("jquery_ujs")
require("turbolinks")
require("_tree .")

5.assets/stylesheets/application.scssを作成して下記を記述

@import "slick-theme";
@import "slick";

6 viewの作成
views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
  <%# トップページのスライド %>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <%# //トップページのスライド %>

省略

<ul class="slick">
<li><%= link_to image_tag("banner1.jpg", class:"banner_image"), "/" %></li>
<li><%= link_to image_tag("banner2.jpg", class:"banner_image"), "/" %></li>
<li><%= link_to image_tag("banner3.jpg", class:"banner_image"), "/" %></li>
</ul>

7.javascript/carousel.jsを作成、下記を記述

$(document).on('turbolinks:load', function(){
  $('.slick').slick({
    autoplay:true,
    dots:true,
  });
});

css
1/* リセットCSS */
2* {
3  box-sizing: border-box;
4}
5
6html,
7body,
8ul,
9li,
10h1,
11h2,
12p,
13div {
14  margin: 0;
15  padding: 0;
16}
17
18body {
19  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN W3", sans-serif;
20  color: #3b4043;
21}
22
23li {
24  list-style: none;
25}
26
27img {
28  max-width: 100%;
29  vertical-align: bottom;
30}
31
32a {
33  text-decoration: none;
34  color: #3b4043;
35}
36
37/* ヘッダー */
38
39.header {
40  background-color: #f1f8fe;
41  /* margin-bottom: 48px; */
42  padding: 20px 0;
43
44}
45.inner {
46  width: 1024px;
47  margin: 0 auto;
48}
49.nav {
50  width: 100%;
51  display: flex;
52  justify-content: space-between;
53  align-items: center;
54}
55.logo {
56  width: 200px;
57}
58.nav__btn{
59  display: inline-block;
60  padding: 0.4em 1.6em;
61  font-size: 0.8em;
62  color: #87CEFA;
63  text-decoration: none;
64  user-select: none;
65  border: 1px #87CEFA solid;
66  border-radius: 3px;
67  transition: 0.4s ease;
68}
69.nav__btn:hover{
70  color: #fff;
71  background: #87CEFA;
72}
73
74.nav__logout{
75  display: inline-block;
76  padding: 0.4em 1.6em;
77  font-size: 0.8em;
78  color: #87CEFA;
79  text-decoration: none;
80  user-select: none;
81}
82.nav__logout:hover{
83  opacity: 0.5;
84}
85
86/* スライド */
87.banner_image{
88  width: 80%;
89  }
90
91/* フォーム周り */
92
93.form__wrapper{
94  min-height: calc(100vh - 161px);
95}
96
97.form__text {
98  width: 50%;
99}
100
101.field{
102  margin: 10px 0;
103}
104
105.actions{
106  margin-bottom: 40px;
107}
108
109.form__btn{
110  display: inline-block;
111  padding: 0.4em 1.6em;
112  font-size: 0.8em;
113  color: #fff;
114  text-decoration: none;
115  user-select: none;
116  background: #87CEFA;
117  border: 1px #87CEFA solid;
118  border-radius: 3px;
119  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
120  transition: 0.2s ease;
121}
122
123.form__btn:hover {
124  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
125  cursor: pointer;
126}
127
128/* メイン */
129
130.greeting{
131  margin-bottom: 20px;
132}
133.greeting__link{
134  text-decoration: underline;
135}
136.page-heading {
137  font-size: 30px;
138  margin-bottom: 28px;
139}
140.card__wrapper {
141  display: flex;
142  flex-wrap: wrap;
143  justify-content: space-between;
144  align-items: center;
145  min-height: calc(100vh - 161px);
146}
147.card {
148  width: calc((100% - 50px) / 3);
149  margin-bottom: 40px;
150}
151.card__img {
152  margin-bottom: 16px;
153}
154.card__title {
155  display: block;
156  font-size: 20px;
157  margin-bottom: 8px;
158  font-weight: bold;
159}
160.card__summary {
161  font-size: 16px;
162}
163.card__user {
164  display: block;
165  font-size: 12px;
166  color: #999;
167  text-align: right;
168  text-decoration: underline;
169}
170
171/* 詳細ページ */
172.prototype__wrapper{
173  min-height: calc(100vh - 161px);
174}
175.prototype__hedding{
176  font-size: 24px;
177  font-weight: bold;
178  text-align: center;
179}
180.prototype__user{
181  display: block;
182  font-size: 16px;
183  color: #999;
184  text-align: center;
185  text-decoration: underline;
186}
187.prototype__image{
188  width: 40%;
189  margin: 0 auto;
190  padding: 16px 0;
191}
192.prototype__detail{
193  display: flex;
194  align-items: center;
195  flex-direction: column;
196  margin-bottom: 8px;
197}
198.detail__title{
199  font-size: 20px;
200  font-weight: bold;
201}
202.prototype__manage{
203  display: flex;
204  justify-content: center;
205  padding-top: 16px;
206}
207.prototype__btn{
208  display: block;
209  padding: 0.4em 1.6em;
210  font-size: 0.4em;
211  color: #999;
212  text-decoration: none;
213  user-select: none;
214  border: 1px #999 solid;
215  border-radius: 3px;
216  transition: 0.4s ease;
217  margin: 0 4px;
218}
219.prototype__btn:hover{
220  color: #fff;
221  background: #999;
222}
223
224.prototype__comments{
225  background-color: #f6f6f6;
226  padding: 20px;
227  margin: 28px 0 40px 0;
228}
229
230.comments_lists{
231  padding-left: 20px;
232}
233
234.comments_list{
235  list-style-type: square;
236  padding-bottom: 5px;
237}
238
239.comment_user{
240  font-size: 16px;
241  color: #999;
242  text-decoration: underline;
243}
244
245/* ユーザーページ */
246.user__wrapper{
247  min-height: calc(100vh - 161px);
248}
249.table{
250  border-collapse: collapse;
251  margin-bottom: 32px;
252  width: 50%;
253}
254.table__col1{
255  text-align: left;
256  font-weight: bold;
257  background: #fafafa;
258  border-collapse: collapse;
259  border: 1px solid #f5f5f5;
260  width: 30%;
261  padding: 8px;
262}
263.table__col2{
264  text-align: left;
265  border: 1px solid #f5f5f5;
266  border-collapse: collapse;
267  width: 70%;
268  padding: 16px 8px;
269}
270.user__card {
271  display: flex;
272  flex-wrap: wrap;
273  justify-content: space-between;
274  align-items: center;
275}
276/* フッター */
277
278.footer {
279  background-color: #999;
280  padding: 10px 0;
281}
282.copyright {
283  text-align: center;
284  color: #fff;
285  font-size: 10px;
286}
287
288/* タブレット対応 */
289@media (max-width: 1024px) {
290  .inner {
291    width: 90%;
292    margin: 0 auto;
293  }
294  .page-heading {
295    font-size: 24px;
296  }
297  .banner_image{
298    width: 100%;
299  }
300  .card {
301    width: 48%;
302    margin-bottom: 40px;
303  }
304  .prototype_image{
305    width: 60%;
306  }
307}
308
309 /* スマホ表示 */
310@media (max-width: 599px) {
311  .logo {
312    width: 120px;
313  }
314  .page-heading {
315    font-size: 20px;
316  }
317  .banner_image{
318    width: 100%;
319  }
320  .card {
321    width: 100%;
322    margin-bottom: 60px;
323  }
324  .card__title {
325    font-size: 18px;
326  }
327  .card__summary {
328    font-size: 14px;
329  }
330  .prototype_image{
331    width: 100%;
332  }
333  .table{
334    width: 100%;
335  }
336}

m.ts10806

2020/12/08 20:09

>【rails】 Ruby on Rails はタグとしてあったほうが良いように思います。既に５つ設定されていますが、キーワードとしてはRuby on Railsのほうが大事と思います。提示されているコードがRails前提であるため。前提なしに回答を得たいのでしたらHTMLはViewファイルのコードではなくブラウザに出力されたHTMLを提示し、SCSSではなくコンパイル後のCSSを提示してください。