2016-12-28 11 views
-1

私はPHPのウェブサイトのヘッダーとしてブートストラップカルーセルを使用していますが、私のウェブサイトのページを変更したときにスライドのメモリを保持する方法はありますか?次のページでは、次のスライドで始まり、最初からやり直すことはありません。ブートストラップのカルーセルスライドをリセットしない方法

詳細なパーツを自由に聞くことができます。私はちょうど各ページ(1つのPHPファイルを含む)に標準のカルーセルコードを入れました。

更新1:ありがとうございました。私は、カルーセルがどのスライドを開始するかを保存するためにセッションを作成しました。問題は、現在のスライド番号をどうやって得ることができるのですか? (なぜなら、カルーセルはx秒後に循環し、最後のスライドを表示する必要があるからです)。

解決済み:@Andrea Ajek非常にありがとうございました!それはまた、PHPセッションを使用せずに私の質問を解決!

+1

これはかなり漠然とした質問は、あなたがあなたが知っているだけのようにその理由downvotedことがありますのsessionStorageに保存されているスライドインデックスがあるかどうかを確認し、正しくカルーセルを初期化するには、次のコードを使用することができます。件名に戻ると、ユーザーのセッション、Cookie、またはローカルストレージに最新の表示スライドを設定することでこれを行うことができます。その後、別のページでその値をチェックして中断した箇所を選択します。 –

+1

イベントリスナーを 'slid.bs.carousel'イベントに置き、最新のスライド番号をクッキーに保存します – Mojtaba

+1

これを行う適切な方法は、ページのヘッダー部分をリロードしないで、非同期呼び出しを使用してページコンテンツを置き換え、 'pushstate'を使ってアドレスを更新します。それ以外の方法で行うと、スライダはリロードされ、レンダリングされ、再初期化されます。最終的には、移動したときのスライドから開始します。一番簡単な方法は、現在のスライドが変更されるたびに$ _SESSIONストレージを使用してそのスライドを覚えておくことです。新しいページに移動したら、あなたが入っていたスライドとその中の 'init()'を確認してください。 –

答えて

1

HTML5 WebStorageを使用して、最後のスライドインデックスを保存できます。あなたのカルーセルは、idが「myCarousel」に等しい属性を持っていると仮定すると、このコードは完璧に動作するはずです:カルーセルは、1つのアイテムから別のスライドを終了したときに

$('#myCarousel').on('slid.bs.carousel', function() { 
    var currentSlide = $('#myCarousel div.active').index(); 
    sessionStorage.setItem('lastSlide', currentSlide); 
}); 

イベント「slid.bs.carousel」は起こります。

if(sessionStorage.lastSlide){ 
     $("#myCarousel").carousel(sessionStorage.lastSlide*1); 
} 
関連する問題