重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

急いでいます！

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

解決済

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
    通報する
通報する

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

質問の本文を隠す

A 回答 (2件)

参考程度に

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決できました。ありがとうございました。

通報する
お礼日時：2016/09/02 11:42

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



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

リンクをクリックしたら　～.goToSlide(0)などといった要領で。
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報