タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装することができる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({
autostart: true, // 自動スタートするかどうか。する場合はtrue、しない場合はfalse
interval: 3000, // スライド切替のインターバル
initial: 0, // スライドインデックス
speed: 700, // アニメーションスピード
friction: 0.3, // バウンスバック動作
mouse: true, // マウスのドラッグでの操作を有効にするかどうか
});
ということで、スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」の使い方でした。
初めまして。
この「Swipeshow」のプラグインの設置方法について可能でしたらお教え下さい。
ホームページ作成の初心者なのですが、jQueryプラグインの設置が上手く行きません。
下記にソースを記載させて頂きますので、どこが悪いのかお教え頂けると幸いです。
$(function() {
$(“.slideshow”).swipeshow();
});
$(“.slideshow”).swipeshow({
autostart: true, // 自動スタートするかどうか。する場合はtrue、しない場合はfalse
interval: 3000, // スライド切替のインターバル
initial: 0, // スライドインデックス
speed: 700, // アニメーションスピード
friction: 0.3, // バウンスバック動作
mouse: true, // マウスのドラッグでの操作を有効にするかどうか
});
現在、100pxｘ100pxの正方形の画像が1枚表示されているだけで、スライドさせる事が出来ません。
画像サイズも578ｘ258pxなのですがそれも反映されていない状態です。
お手数ですが宜しくお願い致します。
初めまして、こんにちは。
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>などで括る必要があります。
hatake様
早速ご返答ありがとうございます。
現状のソースは下記のように記載しております。
全くの勉強不足で申し訳ございません。
$(function() {
$(“.slideshow”).swipeshow();
});
jquery-1.8.1.min.js本体とjquery.swipeshow.cssとjquery.swipeshow.jsのプラグインはダウンロードして同じ階層に入れてあります。
これでは何が不十分なのでしょうか？
何度もお手数ですが宜しくお願い致します。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
$(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>
ダブルクオートは半角にしてください。
何度も恐れります。
フルソースをこちらに記載させて頂こうと思ったのですが、上手く記載されませんでしたので
下記の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行目を一度消してみて下さい。
何度もありがとうございます。
20〜27行目を消してみたのですが、やはり結果は同じでした。
http://photoup-03.x0.to/up/20130619-la36n/51c1527ce43cb.jpg
ダウンロードした外部プラグインのソースは全く触っていないのですが。
何度も申し訳ございませんが宜しくお願い致します。
もしかして11行目に記述されているシングルクォートって全角じゃないっすか？
半角にしてみて下さい。
ありがとうございます。
一応他の行も確認しまいしたが、全角は使用しておりませんでした。
何度もすいません。。。
17行目のslideshowをswipeshowにしてみてもらってもいいですか？
ありがとうございます。
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>
ありがとうございます。
下のナビゲーションは上記を記述するだけでは上手く行きませんでしたのでデモページを保存して
ソースやプラグイン等を確認してみました。
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ファイルにまとめてもどちらでもいいかと思います。
自分が管理しやすい方を選んだ方がいいかもしれません。
ありがとうございます。
ナビゲーションを表示する際にはslideshow-theme.css 内にナビゲーションを表示する記述があると言う事でしょうか？
後、背景が白くなる理由は何か考えられるでしょうか。
ちなみにブラウザは何をお使いでしょうか。
こちらはInternet Explore 10 と Firefox21.0の両方で確認しましたが、
どちらも背景が白くなっています。
下記デモ画面では白くなっていないのでブラウザの問題だけではないと思うのですが。
http://ricostacruz.com/swipeshow/
何度も申し訳ございません。
背景が白くなるのはちょっとわかりません。。。
ブラウザはChromeを使っています。
わかりました。
本当にありがとうございます。
もし可能でしたら、最後にもう一つだけご質問させて下さい。
このプラグインをスマートフォン用に設置したいのですが、
横幅は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
何か良い方法はあるでしょうか。
本当に何度も申し訳ございませんが宜しくお願い致します。
すいません。
画像が小さ過ぎたので再送させて頂きます。
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の細かい調整まではわかりません。。。
ありがとうございます。
何度もお返事頂き大変ありがとうございました。
また何かありましたら宜しくお願い致します。
大変感謝しております。