チーム開発で活用した技術をアウトプット投稿
目的
slickを用いて下記のようなスライドショーの作成
開発環境
- Ruby 3.1.2
- Rails 6.1.7
- bootstrap併用
実装手順
1.slickの導入
今回はCDNを用いて実装
公式HPのヘッダーget it nowをクリックし
View On Githubからgithubに移動し、READMEにある以下3つをコピー
<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>
app/views/layouts/application.htmlに以下のように貼り付ける
application.html
<html>
<head>
<!--省略-->
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<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"/> <!--追加-->
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <!--追加-->
</head>
<!--省略-->
2.viewページの記述
スライドショーを配置したい場所に以下のように記述
li内に画像が入る形になる
app/views/public/top.html.erb
<div class="top_slide text-center">
<ul class="p-0 slider">
<li class="slider-item slider-item01"></li>
<li class="slider-item slider-item02"></li>
<li class="slider-item slider-item03"></li>
</ul>
<p class="top_text">
<span>ようこそ！</span><br>
このサイトは、ケーキ販売のECサイトになります。<br>
</p>
</div>
3.CSSの設定
今回はbootstrap併用のため
app/javascript/stylesheetsの中にproduct.cssを作成
app/javascript/packs/application内に以下を記述
application.js
import "../stylesheets/product.css"
これでproduct.cssが読み込まれるようになるのでスライドショーの記述を行う
product.css
/*スライダー処理*/
.slider {
position:relative;
z-index: 1; /*z-index を持つ要素はより小さな要素の上に重なる*/
}
.slider-item {
width: 100vh;/*各スライダーの幅、.sliderの横幅一杯の100%を指定*/
height: 400px;/*各スライダーの高さ、.sliderと同じ高さに指定*/
background-repeat: no-repeat;/*背景画像をリピートしない*/
background-position: center;/*背景画像の位置を中央に*/
background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
.slider-item01 {
background: url("../../assets/images/top1_image.png");/*背景画像のパスを指定*/
background-size: cover;
}
.slider-item02 {
background-image: url(../../assets/images/top2_image.png);
background-size: cover;
}
.slider-item03 {
background-image: url(../../assets/images/top3_image.png);
background-size: cover;
}
.top_text{
position: absolute;
color: white; /*文字の色*/
z-index: 2; /*z-index を持つ要素はより小さな要素の上に重なる*/
top: 10%; /*上からの配置位置*/
left: 40%; /*左からの配置位置*/
-webkit-transform: translate(-30%, 0%);
text-shadow: 2px 2px 5px black; /*文字の影等の処理*/
text-align: center;
font-size: 20px; /*文字のサイズ*/
letter-spacing: 0.1em; /*文字の感覚*/
}
.top_text span{
font-weight: bold; /*太文字に*/
font-size: 34px;
vertical-align: bottom;
}
4.JavaScripyの記述
最後にスライドショーを表示させるページにJavaScriptを埋め込む
今回はTopページに表示したいためapp/views/public/top.html.erbに記述
.js
<script>
$('.slider').slick({
autoplay: true,//自動的に動き出すか
autoplaySpeed: 3000,//次のスライドに切り替わる待ち時間
speed: 1500,//スライドの動きのスピード
infinite: true,//スライドをループさせるか
slidesToShow: 1,//スライドを画面に3枚見せる
slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる
arrows: false,//画像移動用の矢印の表示
dots: true,//下部ドットナビゲーションの表示
});
</script>
以上で完成！
問題点
スライドが一枚目に戻った時に、一瞬白いフラッシュのようなものが入る事がある
現状、解決方法が見つからないが、解決できたら更新予定
参考