Go to Qiita Advent Calendar 2024 Top
LoginSignup
74
62

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@SatoshiAoki0419(satoshi aoki)

jQueryを使わないスワイプ対応のjavascriptスライダーSwiper の使い方

Last updated at Posted at 2016-11-01

jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。

【使い方（Usage）】

  1. GitHubから最新バージョンのSwiperをダウンロードする。 Swiper
  2. 下記をHTMLに記載
<head>
  ....
  <link rel="stylesheet" href="cssまでのパス/idangerous.swiper.css">
  <script defer src="JAVASCRIPTまでのパス/idangerous.swiper-2.x.min.js"></script>
  ....
</head>

<body>
<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド１の内容を好きなように設置する -->
      </div>
      
      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- ここにスライド２の内容を好きなように設置する -->
      </div>
      
      <!--Third Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド３の内容を好きなように設置する -->
      </div>
      <!--Etc..-->
  </div>
</div>
</body>

　3. CSSのidangerous.swiper.cssを開いて、Swiper部分の高さを設定（ファイルの最後のほうにある）

.css
/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

4.Initialize（初期化） ドキュメントが読み込まれたとき (もしくはウィンドウがロードされたとき)Swiperを走らせる

.js
<script type="text/javascript">
/*======
ドキュメントレディかウィンドウがロードされてから使用すること
例:
jQueryだったら: $(function() { ...code here... })

もしくはJavaScriptのみでwindowがloadされたときにスタートさせるなら
window.onload = function() { ...code here ...}

もしくはJavaScriptのみでdocumentがreadyになったときにスタートさせるなら
document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)

という感じで
=======*/

/*
jQueryまたはZeptoの場合。
*/
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

/* 上か下かのどちらかを記述する。jQueryを使っていない人は↓こちらだけ。使っている人は↑だけ。 */

window.onload = function() {
  var mySwiper = new Swiper('.swiper-container',{
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });  
}
</script>

5.完了　

【オプション一覧】

パラメータ タイプ デフォルト値 記入例 解説
speed 数値 300 600 スライドアニメーション間隔の秒数（ミリ秒）
autoplay 数値 5000 - オートプレイの時の間隔秒数（ミリ秒）。この値がないときはオートプレイしない。
mode 文字列 'horizontal' 'vertical' horizontallyで水平（横）スライド、verticallyで垂直（縦）スライド。
loop 真偽 false true trueでループ。デフォルトはループしない。
loopAdditionalSlides 数値 0 2 ループの後に、いくつのクローンを用意するかの数値。New in 2.0.
slidesPerView 数値
or
'auto'		 1 4 スライドコンテナに何枚表示させたいか。（carousel mode）autoもサポートしていて、コンテナの幅によってフィットする。ループと共用できない。New in 2.0.
slidesPerGroup 数値 1 2 いくつのスライドでグループ化するか。デフォルトは1。carousel modeとの組み合わせで便利。
calculateHeight 真偽 false true true にすると、コンテナの高さを計算してスライド毎に高さ設定してくれる。レスポンシブレイアウトや高さが不確定な場合には便利。New in 2.0.
updateOnImagesReady boolean true false すべての画像がロードされたあとで初期化（構築？）されるようにする。 New in 2.0.
releaseFormElements boolean true false フォーム要素を許可するかしないか。New in 2.0.
watchActiveIndex boolean false true If enabled the Swipe recalculates activeIndex dynamically during touch interactions New in 2.0.
visibilityFullFit boolean false true trueのとき、表示されているスライドで、表示領域を隙間なく埋める。New in 2.0.
autoResize boolean true false ブラウザのウィンドウサイズによって自動リサイズをするかしないか。New in 2.0.
resizeReInit boolean false true ウィンドウサイズが変更されるたびに再構築するかしないか。New in 2.0.
DOMAnimation boolean true false custom DOMでのアニメーションをさせるかさせないか。css transitionsができないIE7～9などのため。New in 2.0.
resistance boolean
or
'100%'		 true false falseで跳ね返り禁止。100%をセットすると無制限に跳ね返る。New in 2.0.
noSwiping boolean false true trueにして、"noSwipingClass" をスライドに与えればスワイプできなくなる。New in 2.0.
preventLinks boolean true false スライド中にクリックがされないようにするかしないか。
initialSlide number 2 0 先頭スライドを番号で指定する。
useCSS3Transforms boolean true false falseを設定すると、CSS3でアニメーションさせないようにできる。ただしposition(left:top)を使っての再現になるので、クォリティを保つためにパフォーマンスが低下する。ときどきCSS3でうまく動かないデバイスがあったりするので、そのときはfalseにしてみてね。
フリーモードとスクロールコンテナ関連(Free Mode and Scroll Container)
freeMode boolean false true 各スライドの位置を固定しないでフリーにするかしないか。
freeModeFluid boolean false true スライドからカーソル、タッチを離してもしばらくイージングするかしないか。
scrollContainer boolean false true true をセットすると、スクロールエリアみたいな感じで使える。
momentumRatio number 1 2 タッチを離した後の跳ね返り値。 New in 2.0
momentumBounce boolean true false falseで跳ね返り禁止。New in 2.0
momentumBounceRatio number 1 2 跳ね返り効果の値。New in 2.0
スライドのオフセット（ずらしたりするやつ）関連(Slides offset)
centeredSlides boolean false true アクティブなスライドが必ず真ん中にくるようにする。New in 2.0.
offsetPxBefore number 0 100 一番最初のスライドをオフセット（引っ込めるとか）したいときに、左の境界線からの数値（ピクセル単位）を入れる。 New in 2.0.
offsetPxAfter number 0 100 右側のスライドをオフセット（引っ込めるとか）したいときに、右の境界線からの数値（ピクセル単位）を入れる。New in 2.0.
offsetSlidesBefore number 0 2 左端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。New in 2.0.
offsetSlidesAfter number 0 2 右端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。New in 2.0.
タッチ、マウスの操作関連(Touch/mouse interactions)
touchRatio number 1 0.8 Touch ratio
simulateTouch boolean true false trueのとき、タッチと同じような動作をマウスでも受け付ける。クリックとかドラッグでスライドを動かせる。
onlyExternal boolean false true trueにすると、API機能からしか操作できなくなる。タブ形式とかで使いやすい。
followFinger boolean true false falseのとき、タッチを離したときにスライドが動く。ホールドしている間はアニメーションさせないようにできる。
grabCursor boolean false true trueにしたとき、マウスオンしたときにカーソルが「掴む」マークになる。ちょっとした気遣いですね。
shortSwipes boolean true false 短いスワイプをさせたくないときにfalseを設定。
moveStartThreshold number false 100 Threshold（しきい値）をピクセル単位での調整ができる。スワイプを動き出させるのに、どれくらいのスワイプ動作を必要とさせるか、という値。"touch distance"がこの値より低いと、動かない、そうだ。
ナビゲーション関連(Navigation)
keyboardControl boolean false true キーボードのカーソルキー（矢印）で操作できるようにするか、しないか。
mousewheelControl boolean false true マウスホイールでスライドを操作せきるようにするか、しないか。
ページネーション(Pagination)
pagination string or HTML Element - '.my-pagination' ページネーションのセレクター名を設定できる。例では「my-pagination」というクラスをページネーションタグに当てられる。もしくはHTML要素をいれてもいい。New in 2.0
paginationClickable boolean false true ページネーションボタンをクリックでスライド操作できるようにさせるか、しないか。New in 2.0.
paginationAsRange boolean true trueのとき、ページネーションボタンが表示スライドと連動するように、Classがあてがわれる。２枚以上を同時表示させるスライドで効果的。New in 2.0.
createPagination boolean true false trueのとき、ページネーションを作成。たくさんのspanタグが生成され、各spanにswiper-pagination-switchというクラスがあてがわれ、カレントのスライドにはswiper-active-switchというクラスがあてがわれる。スタイルを当てるのに便利です。
名づけ関連(Namespace)
wrapperClass string 'swiper-wrapper' 'my-wrapper' スワイパーを包んでいる大外のタグのクラスを指定できる。デフォルトは'swiper-wrapper'。
slideClass string 'swiper-slide' 'my-slide' 各スライドのクラスを指定できる。複数のスライダーを設置していて、違うスタイルを当てたいときなどには便利。デフォルトは'swiper-slide'。
slideActiveClass string 'swiper-slide-active' 'my-active-slide' アクティブ中スライドのクラスを指定できる。デフォルトは'swiper-slide-active'。New in 2.0.
slideVisibleClass string 'swiper-slide-visible' 'my-visible-slide' 表示中のスライドのクラスを指定できる。デフォルトは'swiper-slide-visible'。New in 2.0.
slideElement string 'div' 'li' スライドのタグはデフォルトでdivを使用しているが、変更も可能。例ではliに変えている。
noSwipingClass string 'swiper-no-swiping' 'stop-swiping' CSS class of html element that will be used to prevent swiping when "noSwiping" parameter is set to true. New in 2.0.
paginationElement string 'span' 'div' ページネーションのボタンのタグはデフォルトでspanを使用しているが、変更も可能。例ではdivに変えている。
paginationElementClass string 'swiper-pagination-switch' 'my-switch' ページネーションスウィッチのクラス変更が可能。New in 2.0.
paginationActiveClass string 'swiper-active-switch' 'my-active-switch' ページネーションのアクティブボタンのクラス変更が可能。
paginationVisibleClass string 'swiper-visible-switch' 'my-visible-switch' ページネーションの表示中ボタンのクラス変更が可能。New in 2.0.
コールバック関連(Callbacks) ※動作完了時に呼び出す場合とかに
queueStartCallbacks boolean false true "true"で、"slideChangeStart"を加える。"slideChangeStart"は、multiple swipes/transitionsをしているときに発生するコールバック。New in 2.0.
queueEndCallbacks boolean false true "true"で、"slideChangeEnd"を加える。"slideChangeStart"は、multiple swipes/transitionsの直後に発生するコールバック。New in 2.0.
onFirstInit function - function(swiper){ do something } 最初の初期化の直後に発生するコールバック。functionを書き込むことで実行。 New in 2.1
onInit function - function(swiper){ do something } すべての初期化、再初期化の直後に発生するコールバック。functionを書き込むことで実行。New in 2.1
onTouchStart function - function(swiper){ do something } タッチしたら発生するコールバック。functionを書き込むことで実行。
onTouchMove function - function(swiper){ do something } タッチが動いたら発生するコールバック。functionを書き込むことで実行。
onTouchEnd function - function(swiper){ do something } タッチを離したら発生するコールバック。functionを書き込むことで実行。
onSlideReset function - function(swiper){ do something } タッチを離してカレントアクティブスライドがリセットされたら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideChangeStart function - function(swiper){ do something } 前後へのスライドが始まったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideChangeEnd function - function(swiper){ do something } 前後へのスライドが終わったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideClick function - function(swiper){ do something } スライド上でクリックされたら発生するコールバック。functionを書き込むことで実行。
onSlideTouch function - function(swiper){ do something } スライド上でタッチした直後に発生するコールバック。functionを書き込むことで実行。onTouchStartとほとんど同じだが、.clickedSlideと.clikedSlideIndexの値を返す。
function(swiper){ alert(swiper.clikedSlideIndex); }とでもしたら動くはず。
onImagesReady function - function(swiper){ do something } 係るすべての画像がロードされたら発生するコールバック。functionを書き込むことで実行。"updateOnImagesReady"もtrueとするべき。New in 2.0.
onMomentumBounce function - function(swiper){ do something } 跳ね返りしたら発生するコールバック。functionを書き込むことで実行。New in 2.0.
onResistanceBefore function - function(swiper,p){ do something } 跳ね返りしている間に発生するコールバック。functionを書き込むことで実行。pから跳ね返った距離の返り値を得られる。New in 2.0.
onResistanceAfter function - function(swiper,p){ do something } 跳ね返りした後に発生するコールバック。functionを書き込むことで実行。pから跳ね返った距離の返り値を得られる。New in 2.0.
74
62
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
74
62

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?