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..

    How to display child elements of
  • at 100% height?
  • How to move a circle down by 15px with CSS HTML

    CSS how to transition(with transform) a parent and child both, differently

    how to adjust the background color to the right height

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    How do i prevent my CSS affecting external plugins?

    How to add padding to the outside of an input in css

    How can I inline the label with the input horizontally and the inputs vertically

    Why is last select option always shown, even when styled out

    How to add background-image onto the first option of a dropdownlist

    How to make a DIV float on top of another DIV without pushing down the CSS Underneath

    CSS - How to control the gap between background image and container

    How to get a fixed DIV to stay on top of an absolute?

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

    How to animate X number of divs using CSS and javascript?

    how to make textarea looks like input[text] on form invalid

    How to write css for that?

    How to make a webpage look like a popup? [closed]

    How to force html element click wireup from js in dynamically loaded page

    How do you make the colour of a h1 tag to change if the user hovers over the body in css and html?

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    How to implement MVC style on my PHP/SQL/HTML/CSS code?

    How to make this Header/Content/Footer layout using CSS?

    How to put bootstrap code inline

    How to program an
      image gallery, where the hover effect impacts more than 1 element? [closed]

    How to make an entire square div clickable with CSS?

    How to dynamically add a class to li item and change its background color using javascript and css

    Linked text a few lines below hamburger menu is not showing as linkified, but shows fine further down

    How to set align of elements to center with css?

    How to create an HTML/CSS table with double border? [duplicate]