HTML/CSS slideshow without javascript

Question

First of all I want to say that this is a question about a project for my university so I am more looking for pointers not direct answers. Any links pointing me in the right direction to study will be really appreciated.

I'm trying to create a slideshow using CSS/Html only, without using javascript. The requirements are:

No Javscript.
The transition will trigger when the URL hash (#foo) changes (it points to slide's id.
Each slide will have a unique predefined id.

I found many examples for slideshows without javascript but every single one of them used links to achieve that. So the question here is:

How can I achieve that using IDs? Is there any way to show/hide elements using their id?

Note: I know that SO's rules discourage posting links instead of answers but in this case I would like to know if there are any resources to learn from! Thanks!

@andrescpacheco Nothing. That's why I state that I need resources. I don't even know where to begin! — Spartakos
– Spartakos, Commented Apr 18, 2016 at 13:54

Praveen Kumar Purushothaman · Accepted Answer · 2016-04-18 13:46:56Z

I guess well, using :target pseudo element, you can achieve what you wanna do. Having a list of slides with hidden content, and based on the :target, if we show it up, then it would work. This is what I have come up so far.

I am not sure how to achieve it without using links, but this is just for moving right and left, but this uses :target, CSS and no 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>

Use the full screen preview to check out how it looks.

Collectives™ on Stack Overflow

HTML/CSS slideshow without javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related