HTML/CSS Slideshow ohne Javascript

Question

Zunächst möchte ich sagen, dass dies eine Frage über ein Projekt für meine Universität ist, so dass ich eher nach Zeigern nicht direkte Antworten suche. Alle Links, die mich in die richtige Richtung weisen, werden sehr geschätzt.

Ich versuche, eine Diashow nur mit CSS/HTML zu erstellen, ohne JavaScript zu verwenden. Die Anforderungen sind:

• Kein Javscript.
• Der Übergang wird ausgelöst, wenn die URL-Hash (#foo) ändert (es zeigt die ID gleiten.
• Jede Folie wird eine eindeutige vordefinierte ID.

I viele Beispiele für Show ohne Javascript gefunden, aber jeder einzelne von ihnen verwendeten Links das erreichen Also die Frage ist hier:.?

Wie kann ich erreichen, dass IDs gibt es irgendeine Art und Weise Elemente zu zeigen/verstecken ihre ID mit

Hinweis: I weiß, dass SO's ist Regeln raten dazu, Links statt Antworten zu posten, aber in diesem Fall würde ich gerne wissen, ob es irgendwelche Ressourcen gibt, von denen man lernen kann! Vielen Dank!

Answer 1

Ich denke, gut, mit :target Pseudo-Element, können Sie erreichen, was Sie tun möchten. Haben wir eine Liste von Folien mit versteckten Inhalten und basierend auf der :target, wenn wir es zeigen, dann würde es funktionieren. Das ist, was ich bisher herausgefunden habe.

Ich bin mir nicht sicher, wie man es ohne Verwendung von Links erreichen kann, aber dies ist nur für rechts und links, aber dies verwendet :target, CSS und kein JavaScript.

section {background-color: #ccf; border: 5px solid #99f; display: none; line-height: 500px; width: 500px; margin: 15px auto; text-align: center;} 
 
section:target {display: block;} 
 

 
#nav, 
 
#nav li {display: block; margin: 0; padding: 0; list-style: none; text-align: center;} 
 
#nav li {display: inline-block;} 
 
#nav li a {display: block; text-decoration: none; padding: 3px; margin: 5px; border: 1px solid #99f; border-radius: 5px;} 
 
#nav li a:focus, 
 
#nav li a:active {background-color: #ccf; color: #fff;}

<ul id="nav"> 
 
    <li><a href="#slide-1">Slide 1</a></li> 
 
    <li><a href="#slide-2">Slide 2</a></li> 
 
    <li><a href="#slide-3">Slide 3</a></li> 
 
    <li><a href="#slide-4">Slide 4</a></li> 
 
    <li><a href="#slide-5">Slide 5</a></li> 
 
</ul> 
 
<div id="slides"> 
 
    <section id="slide-1">This is Slide 1</section> 
 
    <section id="slide-2">This is Slide 2</section> 
 
    <section id="slide-3">This is Slide 3</section> 
 
    <section id="slide-4">This is Slide 4</section> 
 
    <section id="slide-5">This is Slide 5</section> 
 
</div>

die Vollbild-Vorschau verwenden, um zu überprüfen, wie es aussieht.