アプリ版：「スタンプのみでお礼する」機能のリリースについて

bxsliderで巻き戻しにする方法

解決済

  • 質問者：uxk
  • 質問日時：
  • 回答数：4件

bxsliderで　http://www.headspa-concierge.com/　こちらのサイトの「ヘッドスパの基本的な工程」のように、次へボタンが一番最後から始めに戻るとき巻き戻しになるようにできますでしょうか？
上の、step8まできてstep1を押すと巻き戻しになるのですが、次へボタンを押しても巻き戻しにできるようにしたいです。
テストで作ったサイトでは、このサイトのように巻き戻しになりません。
宜しくお願い致します。

質問者からの補足コメント

  • 教えて頂きました、bxsliderを直接書き換える件ですが、中を見てみましたが「return部分を修正してpagerIndexを0にセットして・・・」の修正をどうすればいいのかわかりませんでした。
    jqueryは全くの初心者なので調べてみましたがわかりませんでした。

    No.1の回答に寄せられた補足コメントです。 補足日時：2016/04/25 16:49
    通報する
通報する

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

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

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

ANo1、2です。



本体をカスタマイズせずに、実現する方法を考えてみました。
APIを利用しようと思ったのですが、infiniteLoop: false を指定していると、スライドが起こらない仕様なので、callbackも利用できないようです。

仕方がないので、ちょっとインチキですがnext、prevのクリックを直接取得するという方法にしてみました。
一度に画像一枚を表示する一般的なタイプであれば、以下のサンプルで動作すると思います。
※ infiniteLoop: falseにしておくと、本体は何もしないというのを利用しています。
※ infiniteLoop: trueの場合は、追加のスクリプトを削除しないと正しく動作しません。

一度に複数の画像を表示するタイプだと、公開されている属性などでは計算がうまくできないので直接値を指定するようにして対応する必要があります。（goToSlide()メソッドは、スライドの番号ではなくpagerの番号を指定しなければならないようですので）

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

<!--　jQuery読込み //-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<!--　bxSlider読込み //-->
<script type="text/javascript" src="../js/jquery.bxSlider/jquery.bxslider.js"></script>

<!--　スタイルシート読込み //-->
<link href="../js/jquery.bxSlider/jquery.bxslider.css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function(){
var slider = $('.bxslider').bxSlider({
slideWidth: 300,
infiniteLoop: false
});

$(".bx-controls-direction").on("click", function(e){
var elm = $(e.target);
var current = slider.getCurrentSlide(),;
var max = slider.getSlideCount() - 1;

if(elm.hasClass("bx-next") && current == max){
slider.goToSlide(0);
} else if(elm.hasClass("bx-prev") && current == 0){
slider.goToSlide(max)
}
});
});
</script>
</head>

<body>
<ul class="bxslider">
<li><img src="A.jpg" alt=""></li>
<li><img src="B.jpg" alt=""></li>
<li><img src="C.jpg" alt=""></li>
<li><img src="D.jpg" alt=""></li>
<li><img src="E.jpg" alt=""></li>
</ul>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご返信が遅くなりすみません。ご丁寧にありがとうございます。
おかげ様で、希望通りの動きになりました。
本当に困っていたので助かりました！

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

No.4

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

ANo3です。



たびたびすみません。
ANo3のスクリプト中、カンマが余分なところがありました。

　var current = slider.getCurrentSlide(),;
　　　　　　　　　　↓
　var current = slider.getCurrentSlide();

最後のほうのカンマが不要です。
    • good
    • 0
    • 件
通報する

No.2

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

ANo1です。



＞jqueryは全くの初心者なので調べてみましたがわかりませんでした。
というのであれば、あまりカスタマイズはお勧めしません。

行きがかり上、ANo1で記した内容を示しておくなら、以下のようなことではありますが・・・
if (!slider.settings.infiniteLoop && slider.active.last) {
　　var pagerIndex = 0;
　　el.goToSlide(pagerIndex, 'prev');
} else {
　　var pagerIndex = parseInt(slider.active.index) + 1;
　　el.goToSlide(pagerIndex, 'next');
}
    • good
    • 0
    • 件
通報する

参考程度に

No.1

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

こんにちは。



bxsliderはたいして知りませんが、オプションの説明を見てみると・・・
　http://bxslider.com/options
「infiniteLoopを指定すると循環します」のような説明になっているようです。（←英語にがてなので…）
指定しないとどうなるのかは書いて無いようですが、コードをざっと眺めて見たところ、1210行あたりにNext/Prevボタンをクリックした時の処理があります。
ご質問の状態（＝端部でボタンを押したとき）を条件判定して単にreturnしていますので、『ループの指定がない時で、端部画像の場合は無視する』という仕様で作成されていると思われます。
/**
* Transitions to the next slide in the show
*/
el.goToNextSlide = function(){
　// if infiniteLoop is false and last page is showing, disregard call
　if (!slider.settings.infiniteLoop && slider.active.last) return;
　var pagerIndex = parseInt(slider.active.index) + 1;
　el.goToSlide(pagerIndex, 'next');
}
一方でpager部分に関しては、クリック時の処理としては、そのまま指定の番号へ戻るようになっているようですね。（ループは考慮しない）

bxsliderには各種のイベントの取得や処理のメソッドがAPIとして用意されていますが、これらを利用してスライドさせることは可能ですが、その時に行おうとしていたスライド動作を中止するメソッドが無いようですので、元の動作でスライドし直してしまう可能性があります。（あるいは逆の順序で）（←確かめていませんので、そのままで処理できるのかもしれません）

確実そうなのは、上記部分で条件判定がきちんとなされていると思いますので、return部分を修正してpagerIndexを0にセットして'prev'でスライドさせるように変えてしまうのが簡単かと思います。（カスタマイズになりますが・・・）
すぐ次の部分に、逆方向の処理に関して同様の記述がされていますが、こちらについても同様ですね。


※ 他にも方法はあると思いますが、とりあえず思いついた方法です。（ご参考まで）
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
今日は確認ができないので、月曜日に試させていただきます！

通報する
お礼日時：2016/04/22 18:27

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

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

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

おすすめ情報