ホームページ制作で利用する機会の多いスライダー。
スライダーを制作できるプラグインは多くありますが、
今回は利用者が多くタイプの違う「slick」と「Swiper」の２つのプラグインで
基本的なスライダーの作り方をまとめました。
目次
「slick」と「Swiper」について
どちらもスライダーを簡単に作れるプラグインです。
※スライダーは自作することも可能ですが、
プログラミングの知識が必要となるのでプラグインの利用が便利です。
以下、簡単に特徴をまとめました。
【slick】
・利用にはjQueryが必要
・日本語翻訳のドキュメントがある※非公式
・レスポンシブ対応
公式サイト
slick – the last carousel you’ll ever need (kenwheeler.github.io)
【Swiper】
・jQuery不要で利用できる
・現状ドキュメントは英語のみ
・レスポンシブ対応
公式サイト
Swiper – The Most Modern Mobile Touch Slider (swiperjs.com)
どちらもレスポンシブに対応していることは共通です。
また、多彩なスライダーが作成できます。
どちらを使うかの選択は
日本語のドキュメントがあってわかりやすいのは「slick」
jQueryが使えない環境では「Swiper」という感じでしょうか。
それでは使い方と基本的なスライダー例をそれぞれのプラグインで紹介します。
使い方
slick
①公式サイトの「get it now」をクリックして「Download Now」よりデータを一式ダウンロードする。
②ダウンロードしたデータの中から「slick.css」「slick.min.js」を取り出して読み込む。
※slickはjQueryが必要なので、必ずjQueryを先に読み込みましょう。
例
<link rel=”stylesheet” href=”slick.css”/>
<jQueryの読み込み>
<script src=”slick.min.js”></script>また、CDNを利用することも可能です。
CDNを利用する場合は同じく公式サイトの「get it now」をクリックして表示されているCDNの利用方法を参照してください。
Swiper
①公式サイトの「Get Started」をクリックし、「Download assets」に記載されているリンクより「swiper-bundle.min.js」と「swiper-bundle.min.css」をダウンロードする。
②上記ダウンロードデータを読み込む
例
<link rel=”stylesheet” href=”swiper-bundle.min.css”/>
<script src=”swiper-bundle.min.js”></script>CDNを利用することも可能です。
公式サイトの「Get Started」にCDNの利用について記載されているので参照してください。
最低限の記述によるスライダー
slick
<ul id="slick_slider">
<li><img src="スライド画像①" alt=""/></li>
<li><img src="スライド画像②" alt=""/></li>
<li><img src="スライド画像③" alt=""/></li>
</ul>$(function () {
$('#slick_slider').slick();
});Swiper
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="スライド画像①" alt=""/>
</div>
<div class="swiper-slide">
<img src="スライド画像②" alt=""/>
</div>
<div class="swiper-slide"">
<img src="スライド画像③" alt=""/>
</div>
</div>
</div>let swiper = new Swiper('.swiper', {
});基本的なスライダー
slick
<ul class="slick_slider" id="slick_slider">
<li><img src="スライド画像①" alt=""/></li>
<li><img src="スライド画像②" alt=""/></li>
<li><img src="スライド画像③" alt=""/></li>
</ul>
$(function () {
$('#slick_slider').slick(
{
arrows: true, // 前・次ボタン
dots:true//ドット部分（Swiperでいうページネーション）
}
);
});.slick_slider {
position: relative;
width: 640px;
li {
position: relative;
overflow: hidden;
.slick-slide img {
display: block;
object-fit: cover;
}
}
.slick-arrow {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
outline: none;
position: absolute;
top: 50%;
z-index: 1;
background-color: rgba($color: #fff, $alpha: .7);
color: #fff;
font-size: 0;
transform: translateY(-50%);
&::before {
content: '';
display: block;
width: 12px;
height: 12px;
border: 1px solid #000000;
border-width: 3px 3px 0 0;
position: absolute;
top: 25px;
}
}
.slick-next {
right: 15px;
&::before {
left: 16px;
transform: translateY(-50%) rotate(45deg);
}
}
.slick-prev {
left: 15px;
&::before {
left: 20px;
transform: translateY(-50%) rotate(-135deg);
}
}
}
.slick-dots {
display: flex;
justify-content: center;
button {
display: block;
width: 10px;
height: 10px;
margin: 6px;
font-size: 0;
padding: 0;
border: 0;
outline: none;
cursor: pointer;
background: #cfcfcf;
border-radius: 50%;
}
.slick-active {
button {
background: #1e4729;
}
}
}
Swiper
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="スライド画像①" alt=""/>
</div>
<div class="swiper-slide">
<img src="スライド画像②" alt=""/>
</div>
<div class="swiper-slide">
<img src="スライド画像③" alt=""/>
</div>
</div>
<div class="pagination"></div>
<div class="button-prev"></div>
<div class="button-next"></div>
</div>let swiper = new Swiper('.swiper', {
loop: true,
pagination: {//ページネーション（slickでいうドット部分）
el: '.pagination',
clickable: true //クリックを有効（デフォルトでは無効なので注意）
},
navigation: {//前・次ボタン
nextEl: '.button-next',
prevEl: '.button-prev',
},
});.swiper{
position: relative;
width: 640px;
}
.button-next,
.button-prev{
cursor: pointer;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
z-index: 1;
background-color: rgba($color: #fff, $alpha: .7);
color: #fff;
&::before {
content: '';
display: block;
width: 12px;
height: 12px;
border: 1px solid #000000;
border-width: 3px 3px 0 0;
position: absolute;
top: 25px;
}
}
.button-next {
right: 15px;
&::before {
left: 16px;
transform: translateY(-50%) rotate(45deg);
}
}
.button-prev {
left: 15px;
&::before {
left: 20px;
transform: translateY(-50%) rotate(-135deg);
}
}
.pagination{
padding: 5px 0;
display: flex;
justify-content: center;
z-index: 1;
span{
width: 10px;
height: 10px;
background: #cfcfcf;
opacity: 1;
}
.swiper-pagination-bullet-active{
background: #1e4729;
}
}複数表示のスライダー
slick
<ul class="slick_slider" id="slick_slider">
<li><img src="スライド画像①" alt=""/></li>
<li><img src="スライド画像②" alt=""/></li>
<li><img src="スライド画像③" alt=""/></li>
<li><img src="スライド画像④" alt=""/></li>
<li><img src="スライド画像⑤" alt=""/></li>
<li><img src="スライド画像⑥" alt=""/></li>
</ul>
$(function () {
$('#slick_slider').slick(
{
arrows: true, // 前・次ボタン
dots:true,//ドット部分（Swiperでいうページネーション）
infinite: true,
slidesToShow: 3,//スライドの枚数
slidesToScroll: 3,
}
);
});cssのコード
※上と同じ
Swiper
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="スライド画像①" alt=""/>
</div>
<div class="swiper-slide">
<img src="スライド画像②" alt=""/>
</div>
<div class="swiper-slide"/>
<img src="スライド画像③" alt=""/>
</div>
<div class="swiper-slide">
<img src="スライド画像④" alt=""/>
</div>
<div class="swiper-slide">
<img src="スライド画像⑤" alt=""/>
</div>
<div class="swiper-slide">
<img src="スライド画像⑥" alt=""/>
</div>
</div>
<div class="pagination"></div>
<div class="button-prev"></div>
<div class="button-next"></div>
</div>let swiper = new Swiper('.swiper', {
loop: true,
slidesPerView:3,//スライドの枚数
slidesPerGroup: 3,
pagination: {//ページネーション（slickでいうドット部分）
el: '.pagination',
clickable: true //クリックを有効
},
navigation: {//前・次ボタン
nextEl: '.button-next',
prevEl: '.button-prev',
},
});cssのコード
※上と同じ
