CODEWITHSUNDEEP
htmlcssslideshow
Spartakos
Spartakos

Reputation: 29

HTML/CSS slideshow without javascript

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:

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!

Upvotes: 0

Views: 7669

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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.

Upvotes: 1

Related Questions