Slide Show Code

[RobDog888]

For shlits and giggles, I tried to make a slideshow and I'm fairly happy with it:

HTML

<div class="Slideshow">
	<input checked="checked" class="SlideGroup" id="Group1" name="SlideGroup" type="radio" />
	<label class="SlideHeader" for="Group1">Image1</label>
	<img alt="image1" class="AccordionTab" src="http://lorempixel.com/400/200/cats" />
	
	<input class="SlideGroup" id="Group2" name="SlideGroup" type="radio" />
	<label class="SlideHeader" for="Group2">Image2</label>
	<img alt="image2" class="AccordionTab" src="http://lorempixel.com/400/200/sports" />
	
	<input class="SlideGroup" id="Group3" name="SlideGroup" type="radio" />
	<label class="SlideHeader" for="Group3">Image3</label>
	<img alt="image3" class="AccordionTab" src="http://lorempixel.com/400/200/people" />
</div>

CSS

.Slideshow *, .SlideGroup:checked + label, .SlideGroup:checked + label + img {
	display: block;
}
.SlideGroup, .SlideGroup + label, .SlideGroup + label + img {
	display: none;
}
.SlideGroup:checked + label {
	background-color: rgb(40, 44, 47);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #fff;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
.SlideHeader:hover {
	background-color: rgb(40, 44, 47);
	color: #fff;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
.SlideHeader {
	background-color: #fff;
	border: 1px solid #ccc;
	color: #000;
	cursor: pointer;
	padding-left: 1em;
	padding-top: 1em;
}
.Slideshow img {
	background-color: #fff;
	border: 1px solid #ccc;
}

JavaScript

var index = 0;
var radios = ["Group1", "Group2", "Group3"];
window.onload = function () {
	slide();
};

function slide() {
	index++;
	if (index > radios.length - 1) {
		index = 0;
	}
	document.getElementById(radios[index]).checked = true;
	setTimeout("slide()", 1750);
}

Fiddle
http://jsfiddle.net/6L4wjpyc/

It can be improved on by far, but it's something.

Yea thats the basics and like what I would find but I need bullets, controls, links and pause on mouseover

Thats a nice online ide site for js!