トップページ　>　ブログ　>　使いやすいスライダープラグイン２選「slick」「Swiper」紹介

BLOG

ブログ

UPDATE：2023.1.12

CATEGORY
ホームページのこと

使いやすいスライダープラグイン２選「slick」「Swiper」紹介

ホームページ制作で利用する機会の多いスライダー。

スライダーを制作できるプラグインは多くありますが、
今回は利用者が多くタイプの違う「slick」と「Swiper」の２つのプラグインで
基本的なスライダーの作り方をまとめました。


「slick」と「Swiper」について

どちらもスライダーを簡単に作れるプラグインです。

※スライダーは自作することも可能ですが、
プログラミングの知識が必要となるのでプラグインの利用が便利です。

以下、簡単に特徴をまとめました。


【slick】

・利用にはjQueryが必要
・日本語翻訳のドキュメントがある※非公式
・レスポンシブ対応
公式サイト
http://kenwheeler.github.io/slick/


【Swiper】

・jQuery不要で利用できる
・現状ドキュメントは英語のみ
・レスポンシブ対応
公式サイト
https://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

【HTML】
<ul id="slick_slider">
　　<li><img src="スライド画像①" alt=""/></li>
　　<li><img src="スライド画像②" alt=""/></li>
　　<li><img src="スライド画像③" alt=""/></li>
</ul>

【JavaScript】
$(function () {
　　$('#slick_slider').slick();
});




Swiper

【HTML】
　<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>

【JavaScript】
let swiper = new Swiper('.swiper', {
});



基本的なスライダー

slick

【HTML】
<ul class="slick_slider" id="slick_slider">
　　　　<li><img src="スライド画像①" alt=""/></li>
　　　　<li><img src="スライド画像②" alt=""/></li>
　　　　<li><img src="スライド画像③" alt=""/></li>
</ul>



【JavaScript】
$(function () {
　　　　$('#slick_slider').slick(
　　　　　　{
　　　　　　　　arrows: true, // 前・次ボタン
　　　　　　　　dots:true//ドット部分（Swiperでいうページネーション）
　　　　　　}
　　　　);
});


【css】

.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

【HTML】
<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>

【JavaScript】
let swiper = new Swiper('.swiper', {
　　　　loop: true,
　　　　pagination: {//ページネーション（slickでいうドット部分）
　　　　　　el: '.pagination',
　　　　　　clickable: true //クリックを有効（デフォルトでは無効なので注意）
　　　　},
　　　　navigation: {//前・次ボタン
　　　　　　nextEl: '.button-next',
　　　　　　prevEl: '.button-prev',
　　},
});


【css】

.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

【HTML】
<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>

【JavaScript】
$(function () {
　　　　$('#slick_slider').slick(
　　　　　　{
　　　　　　　　arrows: true, // 前・次ボタン
　　　　　　　　dots:true,//ドット部分（Swiperでいうページネーション）
　　　　　　　　infinite: true,
　　　　　　　　slidesToShow: 3,//スライドの枚数
　　　　　　　　slidesToScroll: 3,
　　　　　　}
　　　　);
});


【css】
※上と同じ



Swiper

【HTML】
<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>

【JavaScript】
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】
※上と同じ


まとめ

今回は基本的なスライダーの作成例のみですが、
「slick」も「Swiper」も非常に高性能なスライダープラグインです。
用意されている数多くのオプションによってオートスライドや切り替えアニメーションの変更、
サムネイルに連動するスライドなど大体思い通りのスライダーの制作が可能となります。

ぜひ公式ドキュメント等で多彩なオプションをチェックして、
高性能なスライダープラグインを使いこなしましょう！

RELATED POST

関連記事

BLOG TOP

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

スタッフブログ

VIEW MORE
VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間／10:00〜18:00　
定休日／土日祝日

お問い合わせフォーム

プロジェクト

VIEW MORE
  • tonebranding
  • tone village
  • blanchefle
  • SORA to KAZE
  • tone cafe
  • tone college
VIEW MORE

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village（トーンビレッジ）」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village（トーンビレッジ）」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる！

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE