【jQuery】スライドショーの作成方法(横移動ver.)

「【jQuery】スライドショーの作成方法(横移動ver.)」のアイキャッチ画像

タグ

お松お松
こんにちは管理人ことお松(@matsu_2708)です。今回はjQueryとslickを使って横移動するスライドショーの実装を紹介します

こんな方に読んでほしい!

✔️jQueryを使ってスライドショーを作成したい方

jQueryを使って横移動するスライドショーを作成する

早速、コードを書いていきます。

 

See the Pen
by takuya_matsumoto2708 (@matsutaku2708)
on CodePen.

 

↑上記のようなコードになります。

※HTMLファイルにjQuery、スリックCSS、スリックjsの読み込みの記載が必要です。読み込みリンクは下記HTMLに記載しております。

 

HTML(横移動するスライドショー)

<!-- ↓スリックCSS読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">

<!-- ここからスライドショーエリア -->
<ul class="slider">
  <li class="slider-item slider-item01"></li>
  <li class="slider-item slider-item02"></li>
  <li class="slider-item slider-item03"></li>
</ul>
<!-- ここからスライドショーエリア -->

<!-- jQueryの読み込み(3.5.1.ver.が古ければ最新のものを読み込んでください) -->
<script src="jquery-3.5.1.min.js"></script>
<!-- ↓スリックjsの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

注意するポイントは2つです

タス

クロールモーダルウィンドウHTML注意点

  • jQueryとスリックjsを読み込む順番

✔️jQueryとスリックjsを読み込む順番

jQueryを先に読み込んでからスリックjs読み込みを行ってください。

反対にするとスリックが機能しなくなりました。

CSS(横移動するスライドショー)

/* スライダーの設定 */

.slider{
position: relative;
z-index: 1;
width: 100%;
}

/* スライダーの画像読み込み */

.slider-item01{
background: url(https://drive.google.com/uc?export=view&id=1UCxJBABs9ilfl2TVqETD4CYAvY3qXCng);
}
.slider-item02{
background: url(https://drive.google.com/uc?export=view&id=1isHeNpSXS1_PkHEywYqYRVHlvBFFq9Ki);
}
.slider-item03{
background: url(https://drive.google.com/uc?export=view&id=1zH6NK-r2o0P9ohTnL7Ri-PumOqHcUTDw);
}

/* スライダー画像サイズや表示位置の設定 */

.slider-item{
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

/* スライダー矢印の設定 */

.slick-prev,
.slick-next{
position: absolute;
z-index: 3;
top: 60%;
cursor: pointer;
outline: none;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
height: 25px;
width: 25px;
}
.slick-prev{
left: 2.5%;
transform: rotate(-135deg);
}
.slick-next{
right: 2.5%;
transform: rotate(45deg);
}

/* スライダーのドットの設定 */

.slick-dots{
position: relative;
z-index: 3;
text-align: center;
margin: -50px 0 0 0;
}
.slick-dots li{
display: inline-block;
margin: 0 15px;
}
.slick-dots button{
color: transparent;
outline: none;
width: 12px;
height: 12px;
display: block;
border-radius: 50%;
background: #fff;
}
.slick-dots .slick-active button{
background: #333;
}
.slick-prev や .slick-dots は自動で生成されますのでHTMLファイルに記載は不要です。次への矢印ボタンやドットが不要であれば次に記載するjsファイルをにすれば可能です。

jQuery(横移動するスライドショー)

$('.slider').slick({
  autoplaySpeed: 3000,  // スライド表示時間 //
  speed: 1000,  // スライドする間の時間 //
  autoplay: true,  // autoスライドの有無 //
  infinite: true,  // 無限スライドの有無 //
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,  // 矢印の有無 //
  prevArrow: '<div class="slick-prev"></div>',
  nextArrow: '<div class="slick-next"></div>',
  dots: true,  // ドットの有無 //
  pauseOnFocus: false,
  pauseOnHover: false,
  pauseOnDotsHover: false,
});

// ↓モバイルスライドをする場合、下記を記載 //
$('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){
  $('.slider').slick('slickPlay');
});

スライドの矢印やドットが不要な場合は対象項目を false とすれば消えますので色々と試してみてください。

jQuery、CSSを使って横移動スライドショーを作成するまとめ

スリックを読み取ることで簡単にスライドショーを作成することができました。

自分でjavaScript等を頑張っても良いのですが、あまり時間をかけず頼れるものには頼るというのもアリなのかなと思います。