kenshin-tanaka.com

北九州在住フリーランス。web、デザインなど好きなこと書きます。

JavaScript web

jQueryに依存しない高機能スライダー「Swiper」

投稿日:

 

「どのスライダーライブラリを使うか」は、webデザイナーにとって宗教戦争のようなもので、私も1年ぐらいずっと悩んでました。

その戦争も終焉を迎えることになった。

そう、「Swiper」との出会いによって。

 

Swiperとは

SwiperとはjQueryに依存しない高機能レスポンシブ対応のJavaScriptライブラリだ。とてもいい感じにスライダーが作れるし、導入も楽チン。

まずはデモを見てください。

Swiperのデモを見る ※公式サイトにリンクします

 

Swiperのセットアップ方法

まずはSwiperをダウンロードするか、CDNで設定しましょう。

 

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>

※4.x.xを最新版と揃えます。

 

HTMLで組む

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

CSSの設定

.swiper-container {
    width: 600px;
    height: 300px;
}

 

JavaScriptの設定

<body>
  ...
  <script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
  </script>
</body>

 

オプション

以下のオプションを設定できます。

オプション 初期値 設定
initialSlide 0 最初に表示するスライド(0からの連番)
direction horizontal スライドの方向(’horizontal’が横、’vertical’で縦になります。)
speed 300 スライドする際の速度1/1000秒で指定します。
autoplay スライドを自動で動かす場合のオプション。1/1000秒で間隔を指定することで自動でスライドします。
loop false
スライドをloopさせるかどうか
paginationClickable
false ページネーションをクリックした時スライドさせるかどうか
simulateTouch true マウス操作でスライドさせるか
parallax false trueにすることでparallax(視差効果)を実装できます。

 

ぜひ使ってみてくだされー

 

Swiper

 

文字数:2369, 執筆時間:15分

-JavaScript, web
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

プラグインなし!ブログでコードを表示させるJS ライブラリ highlight.js を使ってみた

ブログ(WordPress)でコードを表示させたい。   けども、WordPressのプラグインって有名所だと重いらしいし、いい感じのやつ見つけても最終更新が1年近く前だったり微妙なものしか …

no image

PHPの基礎が学べる本をまとめてみた

突然ですが、WordPressやEC-CUBEでのweb制作の幅を広げるために、PHPをもう一度基礎からみっちり学び直そうと決意。 「PHP 基礎 本」で検索して表示された上位10サイトを集計してみま …

no image

HTTPの危険性とHTTPS化(常時SSL)のメリット

現状 Google Chromeのバージョン68から全HTTPサイトで「保護されていません」の警告表示 Chromeのシェア率は55%以上(シェア率上昇中) Chromeのアップグレードは自動的に実施 …

webサイトのアクセス数を見える化!Googleアナリティクスの設定方法

webサイトを使って集客や認知度を向上するためには、「なんとなく」ではなくデータでしっかりと把握して改善していく必要があります。 把握するべきデータとしては「アクセス数」や「アクセス元」「滞在時間」「 …