他のページに遷移してブラウザの戻るボタンを押した際にflexsliderの現在地をページ遷移前の状態に保持したいです。

Question

flexsliderを使用してサイトを制作しています。
スマートフォン、PCなどで戻るボタンを押した際にflexsliderの現在地をJSなどを利用してページ遷移前の状態にすることは可能なのでしょうか？
可能であればどのような処理をすればよいかが見当もつかず。。
ご教授いただけますと幸いです。

Answer 1

複数対応と戻る以外の操作でも、このページに遷移してくるとスライドが途中から開始してしまう問題に対応(不完全)したものを載せます。

var storage = sessionStorage;
var slidePosition = storage.getItem("slidePosition") || 0;
var saveHisLen = storage.getItem("historyLen");
var positions;
if(saveHisLen){
    saveHisLen = parseInt(saveHisLen, 10);
}
if(slidePosition !== 0){
    positions = slidePosition.split(",");
}
$(function(){
    if(slidePosition !== 0 && saveHisLen == history.length){
        $(".flexslider").each(function(index, element){
            $(this).flexslider({
                animation: "slide",
                startAt: parseInt(positions[index], 10),
            });
        });
    } else {
        $(".flexslider").flexslider({
            animation: "slide",
            startAt: slidePosition,
        });
    }
    $(".jump").on("click", function(e){
        getPosition();
    });
});

//各スライドの現在位置を取得し、保存
function getPosition(){
    var arr = new Array();
    $(".flex-viewport").each(function(index, element){
        $(element).find("ul > li:not(.clone)").each(function(index, element){
            if($(element).hasClass("flex-active-slide")){
                arr[arr.length] = index;
                return false;
            }
        });
    });
    storage.setItem("slidePosition", arr.join(","));
    storage.setItem("historyLen", history.length);
}

以上になります。
質問があれば、またコメントください。

Comments

[hiro421]

ShunsukeIzui様
ありがとうございます！
希望する動きが実現できました！！
本当に助かりました。。。
WebStorageに関しては無知だったので大変参考になりました。
今後ともよろしくお願いいたします！

[orange0190]

すみません。
少し間違いがありました。
次の個所を直して利用してください。
22行目 startAt: slidePosition,
を
startAt: 0,
に直してください。

[hiro421]

ありがとうございます！！

Answer 2

以下でどうでしょうか。

var storage = sessionStorage;
var slidePosition = parseInt(storage.getItem("slidePosition") || 0;
$(function(){
    $(".flexslider").flexslider({
        animation: "slide",
        startAt: slidePosition,
    });

    $(".jump").on("click", function(e){
        getPosition();
    });
});

//スライドの現在位置を取得
function getPosition(){
    $(".flex-viewport ul > li:not(.clone)").each(function(index, element){
        if($(element).hasClass("flex-active-slide")){
            storage.setItem("slidePostion", index);
            return false;
        }
    });
}

注意としては、WebStorageを利用しているので、WebStorageを利用できない環境では動作しないことと今回はjumpというクラスを持っている要素のクリックイベントで、スライドの現在の位置を取得しているのでその他のイベントでは、少し手を加えないといけないことです。
また、スライドは1つしかないことを想定してます。
複数スライドがある場合には、少し別のコードが必要になります。
必要なら考えてみますので、コメントをください。

追記
すみません。以上のコードには、次の問題もありました。
・戻る以外の操作でも、このページに遷移してくるとスライドが途中から開始してしまう。
ですので、これは参考程度に留めておいてください。

Comments

[hiro421]

ご回答ありがとうございます！
大変参考になります。
ちなみに同ページに3つのスライダーを設置するため、
もしお時間ありましたら複数用のコードもご教示いただけますと幸いです！
ご検討よろしくお願いいたします！

[orange0190]

すべてのスライダーに同一のクラスが設定されているということでよろしいですね。

[hiro421]

はい、同一のクラスがついています！