Slideshow without JS

Have you ever had to do a slideshow on the site? I think so, which is why I decided to write this article. Sometimes I have to do it on sites, but I don’t know js yet and I usually search, download the source code and try to configure it.

A couple of days ago, when I made a portfolio to a friend on his website, I again encountered this problem. And a thought occurred to me. I have seen several articles where standard radio and checbox styles are modified using the label tag. So I decided to make such a strange "form" slideshow. When I did something like a slideshow_non_js_v1.0, I realized the simplicity of this code. True, auto-switching to the next image is probably on html, css is not done, but someone doesn’t need it, but who needs it, I did everything on JS. More precisely not quite me, I had to google a little bit.

So, v1:

<div class="slideshow"> <div class="slides"> <label><img class="slide" src="__1"><input id='s1' type=radio /></label> <label><img class="slide" src="__2"><input id='s2' type=radio /></label> <label><img class="slide" src="__3"><input id='s3' type=radio /></label> </div> <div class="labels"> <label for="s1"><img src="__1" class='label'></label> <label for="s2"><img src="__2" class='label'></label> <label for="s3"><img src="__3" class='label'></label> </div> </div> 

Well, the style:
')

 input[type=radio] {display: none;} img.slide {max-width: 950px; max-height: 500px; margin: 0 auto; border-radius: 5px; display: none;} label input:checked ~ img {display: block;} img.label {height: 150px; } 

Here and the main demo: slauk3run.pe.hu/portfolio .

And as I promised, those who need auto switching:

 var idArray = ["s1", "s2", "s3"]; var i = 0; setInterval(function(){ document.getElementById(idArray[i]).click(); i = (i+1)%idArray.length; }, 10000); 

At the beginning s1, s2, s3 is id radio. At the end of 10,000 is the time between switching.

And now a surprise for php programmers, so that they don’t have to write each file to the page, but simply drop it into a folder (super update):

  <div class="slideshow"> <div class="slides"> <?php $a = 1; foreach (glob("____/*.jpg") as $Picture) { $a = $a + 1; echo "<label><input name=slide type=radio id=s".$a; if($a == 2)echo " checked"; echo "><img class='slide' src='".$Picture."'></label>"; }; ?> </div> <div class="labels"><?php $b = 1; foreach (glob("images/*.jpg") as $Picture) { $b = $b + 1; echo "<label for='s".$b."'><img class='label' src='".$Picture."'></label>"; }; ?></div> </div> <script> var idArray = [<?php $i=1; while($i <= $b){echo '"s'.$i.'"'; $i++};?>]; var i = 0; setInterval(function(){ document.getElementById(idArray[i]).click(); i = (i+1)%idArray.length; }, 10000); </script> 

That's all, if someone does not work because of my mistake, write in the comments, correct (everything works for me :).