Swipeshow

JavaScript

スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」

タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装することができるjQueryプラグイン「Swipeshow」をご紹介します。jQuery 1.8が必要とのこと。モバイルからのアクセスが増えてくる中、こういったスワイプにも対応しているプラグインはこれからますます重要になってきそうですね。

[ads_center]

使い方

まずはHTMLマークアップから。以下のようにシンプルに記述します。

<div class="swipeshow">
    <ul class="slides">
        <li class="slide"> ... </il>
        <li class="slide"> ... </li>
        <li class="slide"> ... </li>
    </ul>
</div>

CSSでスライドショーのサイズを指定しておきます。

.swipeshow {
    width: 200px;
    height: 200px;
}

ダウンロードしたプラグインファイルを読み込みます。jQuery本体も読み込んでおく必要があります。

<link rel='stylesheet' href='jquery.swipeshow.css'>
<script src='jquery.swipeshow.js'></script>

あとはSwipeshowをセットすればOKです。

$(function() {
    $(".swipeshow").swipeshow();
});

実際にiPhoneで動作確認してみると、ちゃんとスワイプ操作で画像が切り替わりました。これからスライドショーを実装しようとする場合には選択肢の1つになりそうですね。

Swipeshow

オプションでは自動スタートやインターバル、アニメーションスピードなどを設定することができます。

$(".swipeshow").swipeshow({
    autostart: true, // 自動スタートするかどうか。する場合はtrue、しない場合はfalse
    interval: 3000, // スライド切替のインターバル
    initial: 0, // スライドインデックス
    speed: 700, // アニメーションスピード
    friction: 0.3, // バウンスバック動作
    mouse: true, // マウスのドラッグでの操作を有効にするかどうか
});

ということで、スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」の使い方でした。

関連記事

  1. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  2. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

  3. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  4. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  5. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  6. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

コメント

    • Takashi
    • 2013年 6月 19日

    初めまして。

    この「Swipeshow」のプラグインの設置方法について可能でしたらお教え下さい。

    ホームページ作成の初心者なのですが、jQueryプラグインの設置が上手く行きません。
    下記にソースを記載させて頂きますので、どこが悪いのかお教え頂けると幸いです。

    $(function() {
    $(“.slideshow”).swipeshow();
    });

    $(“.slideshow”).swipeshow({
    autostart: true, // 自動スタートするかどうか。する場合はtrue、しない場合はfalse
    interval: 3000, // スライド切替のインターバル
    initial: 0, // スライドインデックス
    speed: 700, // アニメーションスピード
    friction: 0.3, // バウンスバック動作
    mouse: true, // マウスのドラッグでの操作を有効にするかどうか
    });

    現在、100pxx100pxの正方形の画像が1枚表示されているだけで、スライドさせる事が出来ません。
    画像サイズも578x258pxなのですがそれも反映されていない状態です。

    お手数ですが宜しくお願い致します。

    • 初めまして、こんにちは。
      Swipeshowを動かすだけなら以下を記述するだけでOKですよ。
      $(function() {
      $(“.slideshow”).swipeshow();
      });
      以下はオプションを指定する場合の記述の仕方です。
      $(“.slideshow”).swipeshow({
      autostart: true, // 自動スタートするかどうか。する場合はtrue、しない場合はfalse
      interval: 3000, // スライド切替のインターバル
      initial: 0, // スライドインデックス
      speed: 700, // アニメーションスピード
      friction: 0.3, // バウンスバック動作
      mouse: true, // マウスのドラッグでの操作を有効にするかどうか
      });

      あとjQuery本体とダウンロードしたプラグインファイルを外部ファイルで読み込んでおく必要があります。
      マークアップやCSSの記述は記事や公式サイトを参考にしてみて下さい。
      あとご存知かと思いますがJSを記述する場合は<script></script>などで括る必要があります。

    • Takashi
    • 2013年 6月 19日

    hatake様

    早速ご返答ありがとうございます。
    現状のソースは下記のように記載しております。

    全くの勉強不足で申し訳ございません。

    $(function() {
    $(“.slideshow”).swipeshow();
    });

    jquery-1.8.1.min.js本体とjquery.swipeshow.cssとjquery.swipeshow.jsのプラグインはダウンロードして同じ階層に入れてあります。

    これでは何が不十分なのでしょうか?
    何度もお手数ですが宜しくお願い致します。

    • Takashi
    • 2013年 6月 19日

    ********************************************

    $(function() {
    $(“.slideshow”).swipeshow();
    });

    $(“.slideshow”).swipeshow({
    autostart: true, // 自動スタートするかどうか。する場合はtrue、しない場合はfalse
    interval: 3000, // スライド切替のインターバル
    initial: 0, // スライドインデックス
    speed: 700, // アニメーションスピード
    friction: 0.3, // バウンスバック動作
    mouse: true, // マウスのドラッグでの操作を有効にするかどうか
    });

    ********************************************

    jquery-1.8.1.min.js本体とjquery.swipeshow.cssとjquery.swipeshow.jsのプラグインはダウンロードして同じ階層に入れてあります。

    これでは何が不十分なのでしょうか?
    何度もお手数ですが宜しくお願い致します。

    • 以下のようにしてみるとどうでしょうか?
      <script type='text/javascript'>
      $(function() {
      $(“.slideshow”).swipeshow();
      });
      </script>

      ダブルクオートは半角にしてください。

    • Takashi
    • 2013年 6月 19日

    何度も恐れります。

    フルソースをこちらに記載させて頂こうと思ったのですが、上手く記載されませんでしたので
    下記のURLより送らせて頂きます。

    http://photoup-03.x0.to/up/20130619-vkvpo/51c14fa886cf4.jpg

    jquery-1.8.1.min.js本体とjquery.swipeshow.cssとjquery.swipeshow.jsのプラグインはダウンロードして同じ階層に入れてあります。

    これでは何が不十分なのでしょうか?
    何度もお手数ですが宜しくお願い致します。

    • すいません、コメントにはコードを記述するとセキュリティの関係で変換されたりするので上手く載せることはできないようです。
      URLを確認しました。20〜27行目を一度消してみて下さい。

    • Takashi
    • 2013年 6月 19日

    何度もありがとうございます。

    20〜27行目を消してみたのですが、やはり結果は同じでした。
    http://photoup-03.x0.to/up/20130619-la36n/51c1527ce43cb.jpg

    ダウンロードした外部プラグインのソースは全く触っていないのですが。

    何度も申し訳ございませんが宜しくお願い致します。

    • もしかして11行目に記述されているシングルクォートって全角じゃないっすか?
      半角にしてみて下さい。

    • Takashi
    • 2013年 6月 19日

    ありがとうございます。

    一応他の行も確認しまいしたが、全角は使用しておりませんでした。

    何度もすいません。。。

    • 17行目のslideshowをswipeshowにしてみてもらってもいいですか?

    • Takashi
    • 2013年 6月 19日

    ありがとうございます。

    17行目のslideshowをswipeshowに変えても変化はなかったのですが、

    10行目のリンクを下記に変更し、
    script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”

    26行目の「swipeshow」を「slideshow swipeshow」に変更させると、
    スライドさせる事が出来るようになりました!

    後、下記デモのように画像の下部分にナビゲーション用の丸ボタンのようなものが出ないのですが、
    これはまた別のものをダウンロードしてないと行けないでしょうか?
    http://ricostacruz.com/swipeshow/

    何度も申し訳ございません。

    • 無事動作できてよかったです。
      下のナビゲーションは以下を記述することで表示されます。
      <div class='dots'></div>

    • Takashi
    • 2013年 6月 19日

    ありがとうございます。

    下のナビゲーションは上記を記述するだけでは上手く行きませんでしたのでデモページを保存して
    ソースやプラグイン等を確認してみました。
    http://ricostacruz.com/swipeshow/

    現状ソースは下記のようになっております。
    http://photoup-03.x0.to/up/20130619-zgopq/51c166c69340d.jpg

    こちらは現状の画面キャプチャーです。
    http://photoup-03.x0.to/up/20130619-zgopq/51c166cae747a.jpg

    元々2、3行目はhow toには記載がなかったと思うのですが、
    これのどちらを消してもおかしな結果になってしまいます。
    これらを使用しないで正しく表示する事は出来ないのでしょうか?

    また現状、ナビゲーションの背景に半透明の白い長方形が入っているのですが、
    これはどうやって消せば良いでしょうか?

    本当に何度も申し訳ございませんが宜しくお願い致します。

    • 僕も実際に試してみましたが、背景は白くなりませんでした。
      slideshow-theme.cssは名前の通りプラグインのCSSテーマファイルなので、このまま読み込んでもいいですし同じサイトのCSSファイルにまとめてもどちらでもいいかと思います。
      自分が管理しやすい方を選んだ方がいいかもしれません。

    • Takashi
    • 2013年 6月 19日

    ありがとうございます。

    ナビゲーションを表示する際にはslideshow-theme.css 内にナビゲーションを表示する記述があると言う事でしょうか?

    後、背景が白くなる理由は何か考えられるでしょうか。
    ちなみにブラウザは何をお使いでしょうか。

    こちらはInternet Explore 10 と Firefox21.0の両方で確認しましたが、
    どちらも背景が白くなっています。

    下記デモ画面では白くなっていないのでブラウザの問題だけではないと思うのですが。
    http://ricostacruz.com/swipeshow/

    何度も申し訳ございません。

    • 背景が白くなるのはちょっとわかりません。。。
      ブラウザはChromeを使っています。

    • Takashi
    • 2013年 6月 19日

    わかりました。
    本当にありがとうございます。

    もし可能でしたら、最後にもう一つだけご質問させて下さい。

    このプラグインをスマートフォン用に設置したいのですが、
    横幅はhtml内の画像のサイズを width=”100%”、
    jquery.swipeshow.css内の39行目をwidth: 100%;にすれば
    スマホを縦横に回転させても自動的に横幅いっぱいに表示されるのですが、
    縦のサイズがどうも上手く行きません。

    現状のソースですと画像は上手く表示されているのですが、
    jquery.swipeshow.css内の39行目を height: 100%; にしている為
    プラグインの枠が画面縦いっぱいに広がって余白が出来てしまいます。

    html
    http://photoup-03.x0.to/up/20130619-j2k1d/51c19868dc4d5.jpg

    jquery.swipeshow.css
    http://photoup-03.x0.to/up/20130619-j2k1d/51c1986c5a7b8.jpg

    何か良い方法はあるでしょうか。

    本当に何度も申し訳ございませんが宜しくお願い致します。

    • Takashi
    • 2013年 6月 19日

    すいません。
    画像が小さ過ぎたので再送させて頂きます。

    html
    http://photoup-03.x0.to/up/20130619-hnlv4/51c198fb1efe3.jpg

    jquery.swipeshow.css
    http://photoup-03.x0.to/up/20130619-hnlv4/51c199050c935.jpg

    何卒、宜しくお願い致します。

    • 色んなブラウザに対応させるのはほんと大変ですよね…。
      iPhoneでちゃんと表示されてもAndroidでレイアウトが崩れたり、またはその逆だったり。
      色々とCSSを弄りながら少しづつ調整していくしかないかと思います。
      僕もCSSの細かい調整まではわかりません。。。

    • Takashi
    • 2013年 6月 19日

    ありがとうございます。

    何度もお返事頂き大変ありがとうございました。
    また何かありましたら宜しくお願い致します。

    大変感謝しております。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP