実現したいこと
実現したいこと：
ライブラリ「Slick.js」を使用して、3枚の画像を無限ループさせたいが、自動再生されない、かつ3枚目の画像が左側に表示されない問題を解消したい。
イメージ（参考にしたサイト）：
https://coco-factory.jp/ugokuweb/move01/6-1-7/
HTML
1<head> 2 <link 3 rel="stylesheet" 4 type="text/css" 5 href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" 6 /> 7 <link rel="stylesheet" href="./assets/css/common.css" /> 8</head> 9 10<section class="slider_wrap"> 11 <ul class="slider"> 12 <li> 13 <img 14 src="./assets/img/1-1.jpg" 15 alt="" 16 /> 17 </li> 18 <li> 19 <img 20 src="./assets/img/1-2.jpg" 21 alt="" 22 /> 23 </li> 24 <li> 25 <img 26 src="./assets/img/1-3.jpg" 27 alt="" 28 /> 29 </li> 30 </ul> 31 </section> 32 33<!-- 以下はbodyタグの手前に書いています --> 34<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 35<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 36<script src="./assets/js/common.js"></script>
SCSS（common.css）
1section {2&.white_styling {3 .slider {4 width: 100%;5 margin: 0 auto;6 7 .slick-list {8 &.draggable {9 padding: 0 !important;10 }11 }12 13 img {14 width: 67.18vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/15 height: auto;16 }17 18 .slick-slide {19 transform: scale(0.836); /*左右の画像のサイズを80%に*/20 transition: all 0.5s; /*拡大や透過のアニメーションを0.5秒で行う*/21 opacity: 0.5; /*透過50%*/22 23 &.slick-center {24 transform: scale(1); /*中央の画像のサイズだけ等倍に*/25 opacity: 1; /*透過なし*/26 }27 }28 }29 30 // 矢印31 .slick-prev, 32 .slick-next {33 display: none;34 }35 }36}
JavaScript
1//スライダー2$('.slider').slick({3 autoplay: true, //自動的に動き出すか。初期値はfalse。4 infinite: true, //スライドをループさせるかどうか。初期値はtrue。5 speed: 500, //スライドのスピード。初期値は300。6 slidesToShow: 3, //スライドを画面に3枚見せる7 slidesToScroll: 1, //1回のスクロールで1枚の写真を移動して見せる8 // prevArrow: '<div class="slick-prev"></div>', //矢印部分PreviewのHTMLを変更9 // nextArrow: '<div class="slick-next"></div>', //矢印部分NextのHTMLを変更10 centerMode: true, //要素を中央ぞろえにする11 variableWidth: true, //幅の違う画像の高さを揃えて表示12 dots: false, //下部ドットナビゲーションの表示13});
発生している問題・分からないこと
ライブラリ「Slick.js」を使用して、3枚の画像を無限ループさせたいが、どうすれば自動再生されるか、かつ3枚目の画像が左側に表示されるかがわからない。
該当のソースコード
特になし
試したこと・調べたこと
上記の詳細・結果
試したこと：
・CDNファイルの読み込み位置が問題ないか、確認 → 問題なし
・jQueryが読み込まれているか確認 → 問題なし
・HTMLに記述しているクラス名と、CSSファイル、JSファイルに記述しているクラス名が一致しているかどうか確認 → 問題なし
・ドキュメントが完全に読み込まれてからSlickスライダーを初期化するよう、jsの記述を以下のように修正してみた → 変化なし
JavaScript
1$(document).ready(function(){2 $('.slider').slick({3 autoplay: true, //自動的に動き出すか。初期値はfalse。4 infinite: true, //スライドをループさせるかどうか。初期値はtrue。5 speed: 500, //スライドのスピード。初期値は300。6 slidesToShow: 3, //スライドを画面に3枚見せる7 slidesToScroll: 1, //1回のスクロールで1枚の写真を移動して見せる8 // prevArrow: '<div class="slick-prev"></div>', //矢印部分PreviewのHTMLを変更9 // nextArrow: '<div class="slick-next"></div>', //矢印部分NextのHTMLを変更10 centerMode: true, //要素を中央ぞろえにする11 variableWidth: true, //幅の違う画像の高さを揃えて表示12 dots: false, //下部ドットナビゲーションの表示13 });14});
補足
jsの読み込みエラーは発生していない。
0 コメント