jqueryスライドショー、開始スライド位置の変更について

http://www.skuare.net/test/js/jquery.slider.min.js"
こちらのdiv slider2というjqueryのスライドショースクリプトなんですが、
オプションで移動方向をrightに設定したら
開始スライドが真ん中からになってしまいます。
rightに設定した場合、これを一番右から開始となるように、なんとか解消したいです。

以下にサンプルソースをのせましたので
訂正箇所等、ご教示いただきましたら幸いです。
（スライダー本体のjsファイルはお手数ですが上記URLからご確認願います）

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="http://www.skuare.net/test/css/jquery.slider.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.skuare.net/test/js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="http://www.skuare.net/test/js/jquery.slider.min.js"></script> <script type="text/javascript"> $(function() { $('#test').slider({ showControls: true, // << >>を表示するか autoplay: true, //自動再生 showPosition: true, //何枚目を見ているかを表示 hoverPause: true, //マウスオーバーでストップ wait: 1500, //停止時間 fade: 500, //フェード時間 direction: "right" //移動方向 }); }); </script> </head> <body> <div id="test"> <div>あいうえお</div> <div>かきくけこ</div> <div>さしすせそ</div> </div> </body> </html>

okayu3

2015/05/14 07:00

そのライブラリは、現在配布されていないようですね。クレジットも記載されていませんので、使うべきではないと思います。

southern_flavor

2015/05/16 10:11

確かに何も記載はないですし、大元のデモ・ダウンロードページはデッドリンクになっていました。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

根本的な解決をするなら、圧縮する前の jquery-slider2のソース
https://github.com/wex/jquery-slider2/blob/master/jquery.slider.js

を追って、望ましい動きをするように手を加えることに
なると思いますが、とりあえずの処理として、

要素リストの最後にダミーの要素を追加してスライド開始直後に削除する

という方法をやってみました。

以下、検証のために作成したHTMLを載せます。
（画面ロード直後にスライドが始まると、動き出しが確認できないので、
スライド開始のボタンを追加しています。）

lang
1<!DOCTYPE html>
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5<link href="http://www.skuare.net/test/css/jquery.slider.css" rel="stylesheet" type="text/css" />
6<script type="text/javascript" src="http://www.skuare.net/test/js/jquery-1.6.1.min.js"></script>
7<script type="text/javascript" src="http://www.skuare.net/test/js/jquery.slider.min.js"></script>
8<script type="text/javascript">
9$(function() {
10
11	$("#start_btn").click(function() {
12		$('#test').slider({
13			showControls: true, // << >>を表示するか
14			autoplay: true, //自動再生
15			showPosition: true, //何枚目を見ているかを表示
16			hoverPause: true, //マウスオーバーでストップ
17			wait: 1500, //停止時間
18			fade: 500, //フェード時間
19			direction: "right" //移動方向
20		});
21
22		$('span.jquery-slider-pages span:last-child').remove();
23		$('#my-last-item').remove();
24
25	});
26	}
27);
28</script>
29</head>
30<body>
31<div id="test">
32<div>１番目のスライド</div>
33<div>２番目のスライド</div>
34<div>３番目のスライド</div>
35<div>４番目のスライド</div>
36<div id="my-last-item">スライド開始直後に削除する。</div>
37</div>
38<hr />
39<input type="button" value="START" id="start_btn" />
40</body>
41</html>