3580日くらい過ぎています。年で言ったら9.81年くらいです。情報が古くなってる可能性もあるので参考程度に御覧ください。レスポンシブにも対応していて、スマホなどのタッチデバイスによるスワイプ操作にも対応したコンテンツスライダーです。触ってみたらなかなか良い感じだったのですが、日本語の情報が少なかったのでメモ。Swiperの主な特徴レスポンシブ横スライドだけじゃなくて縦スライドにも対応フリーモード(自分で動かした分だけしかスライドしなくなる)カルーセルモードjQueryなしで単体動作させることもできる(jQueryで発火させることも出来る)コンテンツスライダーなので画像だけじゃなくてなんでも詰め込めるなどでしょうか?他にもたくさんありますので、公式サイトのFeaturesを読んでみて下さい。ZIPというリンクからダウンロードします。解凍したファイルの中で必要なのは、idangerous.swiper-2.0.min.jsidangerous.swiper.cssなので、この2つを設置したいサイトに読み込ませます。/>※バージョンは記事作成時のものです。バージョンによってファイル名が異なる可能性があります。はじめにスライドの中身を作成します。なかに、更に「swiper-wrapper」というクラスを持つDIVを作るそして更にそのなかに「swiper-slide」というクラスのDIVを作る。swiper-slideクラスを持つDIV1つ1つがそれぞれのスライド1枚になります。切り替えリンクを作る場合は、swiper-wrapperの外に1つ適当なクラス名をつけた空DIVを用意しておきます。paginationクラスのDIVです)swiper-slideクラスを持ったDIVはいくつでも作れますし、中には画像だけじゃなくてなんでも詰め込めるようです。例では全てイメージですが、普通にHTMLとか書いてもOKみたいです。))CSSを準備します最低限必要なのは、スライダーの大きさの指定だけみたいです。swiper-pagination-switch(ページネーション通常時)とswiper-active-switch(アクティブ時)はスクリプトが自動的に生成する要素です。なかに書いてしまいました。'.pagination',loop:true,autoplay:3000,paginationClickable:true,calculateHeight:true,touchRatio:0.6,});}という感じみたいです。挙動をカスタマイズする既に上記の例でもいくつかパラメータが設定済みですが、よく使いそうな設定を挙げておきます。自動的に切り替わるまでの待ち時間。すると、ページネーションマーカーをクリックしてスライドを切り替えられるようになります。すると、自動的に高さを計算してくれます。スワイプ操作などでどの程度スライドをひっぱったらスライドするかのしきい値。数が大きくなるほどすぐ反応するようになります。すると、スライドにマウスを当てるとカーソルがグラブになって要素を掴んでスライドできることを明示することができます。目を通してみると幸せになれるかもしれません。動作デモ公式サイトにサンプルがたくさん用意されています。動作デモなどをみてみると、スライダーだけでなく、いろいろと応用が出来そうな感じですね。オプションも豊富ですしいろんな案件に柔軟に対応できるのではないでしょうか?特に、レスポンシブ対応案件が増えてきていますので、レスポンシブ対応のjQueryプラグインは覚えておいて損はないとおもいます。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。