急いでいます！

[jQuery]bxSlider　一番最後と一番最初に戻る　ボタン

解決済

質問者：チャーハン28号
質問日時：2016/08/29 12:07
回答数：2件

javascript初心者です。
どなたか、詳しい方教えていただけますでしょうか？

スライダーの画像数が30枚ほどになる予定です。

next,preview のリンクの応用バージョンとして、
一番最初の画像にもどるリンクと、一番最後の画像を表示させるリンクを表示させたいです。

optionを確認しましたが、実現できそうなoptionは見当たらず。。

どうにかして実装可能でしょうか？

ご回答ありがとうございます！
おしえていただいたメソッドを利用する方法を教えていただけますか？

やってみたのですが上手くいかず。。
すみません、大変初心者なもので、見当ちがいでしたらすみません。

何卒よろしくお願いいたします。

【HTML】
<a href="#" onclick="PrevIconTop();return false;">最初に戻る</a></p>

【JS】
function PrevIconTop() {
slider = $('.bxslider').bxSlider();
slider.goToSlide(0);
}

No.1の回答に寄せられた補足コメントです。補足日時：2016/08/29 15:50
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： fujillin
回答日時：2016/08/29 14:46

こんにちは

公開されているメソッドとして、goToSlideやgetSlideCountが用意されているようですので、これらを利用すれば良いのではないでしょうか？
http://bxslider.com/options

リンクをクリックしたら　～.goToSlide(0)などといった要領で。

- 0
- 件

通報する

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2016/08/30 15:13

ANo1です。

質問者様がどのような形で設置なさっているのかわかりませんが、とりあえず以下の形でテストしてみたところ動作しました。ご参考まで。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.slider, .slider img { width:600px; height:250px; }
.slider > div { position:relative; }
.slider > div span { border:1px solid gray; padding:2px; }
.slider .last { position:absolute; top:0; right:0; }
</style>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2 …
<script type="text/javascript" src="./jquery.bxslider.js"></script>
<link type="text/css" href="./jquery.bxslider.css" rel="stylesheet">

<script type="text/javascript">
$(function(){
var s = $(".slider>ul").bxSlider({
auto: true,
pager: false
});

$(".slider .first").on("click", function(){ s.goToSlide(0); });
$(".slider .last").on("click", function(){ s.goToSlide(s.getSlideCount()-1); });
});
</script>
</head>

<body>
<div class="slider">
<ul>
<li><img src="./img/photo01.jpg" alt=""></li>
<li><img src="./img/photo02.jpg" alt=""></li>
<li><img src="./img/photo03.jpg" alt=""></li>
<li><img src="./img/photo04.jpg" alt=""></li>
<li><img src="./img/photo05.jpg" alt=""></li>
<li><img src="./img/photo06.jpg" alt=""></li>
<li><img src="./img/photo07.jpg" alt=""></li>
<li><img src="./img/photo08.jpg" alt=""></li>
<li><img src="./img/photo09.jpg" alt=""></li>
</ul>

<div><span class="first">to 1st</span>
<span class="last">to Last</span></div>
</div>
</body>
</html>