javascript/HTMLスライドショー/カルーセル用の戻るボタンを作成することはできますか？

Question

私は初心者です。私はまだjavascriptを学んでいます。私はかなり大きなスライドショータイプのサイトを持っています。すべてのスライドは1つのhtmlページにありますので、ブラウザのバック機能を使用することはできません。各スライドには戻るボタンがあります。私は、スライドショーが非線形であるため、バックボタンをどこに置くべきかを具体的に指定することはできません。だから私は他のスライドから特定のスライドに到着することができました。ヒストリー配列や、戻るボタンとして機能するこのバックボタンに使用できるものを作る方法はありますか？私はこれを純粋にjavascript/html/cssでやろうとしています。ここで

は私のセットアップの基本的なバージョンである： https://jsfiddle.net/jthd0zqt/1/

私はJavaScriptで働いて戻るボタンを得たが、唯一の一歩後方ました。私はちょうどそれをクリックして、各ボタンが現在のスライドのIDで変数を更新するようにしました。その後、戻るボタンはその変数を「ポイント」します。問題は、変数が決して戻ってきたIDに更新されていないと戻ってしまえば、複数のステップに戻ることはないということです。希望は意味をなさない。

var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function currentDiv(n) { 
    if (isNaN(n)) { 
    var slides = document.getElementsByClassName("mySlides"); 
    var found = 0; 
    for (var i = 0; i < slides.length; i++) { 
     if (slides[i].getAttribute("name") == n) { 
     found = i + 1; 
     break; 
     } 
    } 
    if (!found) return; 
    n = found; 
    } 
    showDivs(slideIndex = n); 
} 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo"); 
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" opacity-off", ""); 
    } 
    x[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " opacity-off"; 
} 

何らかの理由で、コードがうまく動作しますが、jsfiddleでは動作しません。

Answer 1

はい、可能です。あなたが見なければならないのは、popstateイベントです。いくつかの例がある素晴らしい文書は、https://developer.mozilla.org/en-US/docs/Web/Events/popstateにあります。これがあなたのコードに最も適している場所を見つけなければなりませんが、これがあなたの出発点です。