HTML/CSS slideshow without javascript


Tags: html,css,slideshow

Problem :

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!



Solution :

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.


    CSS Howto..

    Do East Asian (e.g. Chinese) characters have baselines? How do they align with English in CSS?

    How to auto adjust (stretch) div height and width using jQuery or CSS

    CSS class is missed after jQuery replaceWith. How to fix?

    CSS Image size, how to fill, not stretch?

    How to define a good convention for css?

    How to align divs right and left while using the CSS ghost element technique for vertical centering?

    How to auto adjust wrapper height when padding is applied to inner elements

    How do I move that div with CSS in a clean way?

    How to avoid using JavaScript with CSS attribute selector

    How do I align two non-fixed width divs in the center of the browser screen?

    How to ignore

    CSS rules in wordpress theme?

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How fixed a navigation to the center on scroll?

    How to use conditional CSS for IE browser in drupal6?

    How could I use the html a tag to change div width and height?

    How to @import without including all CSS but just the @extends ones

    How to fade an image with CSS without opacity?

    how to set menu to activate always hover effect on [closed]

    How can I stop an CSS animation from interfering with a CSS transform transition?

    How can you remove the table-tags in CreateUserWizard control

    ¿How to create text slider animation?

    How browser auto resize website to mobile browse?

    Avoid the height change of a container + how to position a list item at end

    How do i enable hover effect on an image if the text before it is hovered?

    How to add Jquery Mobile effects to dynamically added elements?

    How to change this CSS code to get required layout

    How to fixed the form fields alignment issues using css and bootstrap

    How to update a web app without suffering cached CSS issues?

    SVG, how to evaluate the property of the svg object

    3 column layout, same height, middle column full size. How to do it without “table-cell”