YACSS Image Slider - Yet Another CSS Image Slider

jwashburn

If you are looking for a simple CSS based image slider for your site I took this from cssscience and tweaked it a bit. You can see a demo here

Its pretty simple. I stripped out the pieces I didnt want.

You can put it on any page. I think it would like nice at the top of a page with 5 or 6 of your favorite images from a gallery and then you could add multiple photos below in a grid format.

Installation is easy. Add an HTML block to your page and drop this in. Notice the sections in red. Those should point to your images for the slider and the arrows you would like to use

<article id="slider">
	<input checked="" name="slider" id="slide1" type="radio">
	<input name="slider" id="slide2" type="radio">
	<input name="slider" id="slide3" type="radio">
	<input name="slider" id="slide4" type="radio">
	<input name="slider" id="slide5" type="radio">
			
		<div id="slides">
				<div id="overflow">
					<div class="inner">
					<article>
						<img src="[B][COLOR="Red"]path-to-your-image.jpg[/COLOR][/B]">
					</article>
					
					<article>
						<img src="[B][COLOR="Red"]path-to-your-image.jpg[/COLOR][/B]">
					</article>
					
					<article>
						<img src="[B][COLOR="Red"]path-to-your-image.jpg[/COLOR][/B]">
					</article>
					
					<article>
						<img src="[B][COLOR="Red"]path-to-your-image.jpg[/COLOR][/B]">
					</article>
					
					<article>
						<img src="[B][COLOR="Red"]path-to-your-image.jpg[/COLOR][/B]">
					</article>
				</div>
			</div>
		</div>
	
	
		
	
		<div id="controls">

			<label for="slide1"></label>
			<label for="slide2"></label>
			<label for="slide3"></label>
			<label for="slide4"></label>
			<label for="slide5"></label>
		
		</div>
		
		<div id="active">

			<label for="slide1"></label>
			<label for="slide2"></label>
			<label for="slide3"></label>
			<label for="slide4"></label>
			<label for="slide5"></label>
			
		</div> 
	
	</article> 
		

Add this to your CSS

#slider {
    margin: 0 auto;
}
.respond {
    margin: 0 auto;
    max-width: 370px;
}
input {
    display: none;
}
#slide1:checked ~ #slides .inner {
    margin-left: 0;
}
#slide2:checked ~ #slides .inner {
    margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
    margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
    margin-left: -300%;
}
#slide5:checked ~ #slides .inner {
    margin-left: -400%;
}
#overflow {
    overflow: hidden;
    width: 100%;
}
article img {
    width: 100%;
}
#slides .inner {
    line-height: 0;
    width: 500%;
}
#slides article {
    float: left;
    width: 20%;
}
#controls {
    height: 50px;
    margin: -35% 0 0;
    width: 100%;
}
#controls label {
    display: none;
    height: 50px;
    opacity: 0.3;
    width: 50px;
}
#active {
    margin: 30% 0 0;
    text-align: center;
}
#active label {
    background: none repeat scroll 0 0 #BBBBBB;
    border-radius: 5px 5px 5px 5px;
    display: inline-block;
    height: 10px;
    width: 10px;
}
#active label:hover {
    background: none repeat scroll 0 0 #CCCCCC;
    border-color: #777777 !important;
}
#controls label:hover {
    opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(5), #slide5:checked ~ #controls label:nth-child(1) {
    background: url("[COLOR="Red"][B]path-to-your-arrows.png[/B][/COLOR]") no-repeat scroll 0 0 transparent;
    display: block;
    float: right;
    margin: 0 -70px 0 0;
}
#slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4) {
    background: url("[COLOR="red"][B]path-to-your-arrows.png[/B][/COLOR]") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    margin: 0 0 0 -70px;
}
#slide1:checked ~ #active label:nth-child(1), #slide2:checked ~ #active label:nth-child(2), #slide3:checked ~ #active label:nth-child(3), #slide4:checked ~ #active label:nth-child(4), #slide5:checked ~ #active label:nth-child(5) {
    background: none repeat scroll 0 0 #333333;
    border-color: #333333 !important;
}

#slides {
    margin: 45px 0 0;
    padding: 1%;
}
#slides .inner {
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
#slider {
    transition: all 0.5s ease-out 0s;
}
#controls label {
    transition: opacity 0.2s ease-out 0s;
}
#slide1:checked ~ #slides article:nth-child(1) .info, #slide2:checked ~ #slides article:nth-child(2) .info, #slide3:checked ~ #slides article:nth-child(3) .info, #slide4:checked ~ #slides article:nth-child(4) .info, #slide5:checked ~ #slides article:nth-child(5) .info {
    opacity: 1;
    transition: all 1s ease-out 0.6s;
}
.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
    transition: all 0.5s ease-out 0s;
}
#slider #controls {
    height: 50px;
    margin: -35% 0 0 0%;
    width: 100%;
}
#slider #controls label {
    transform: scale(0.8);
}
#slider #slides {
    border-radius: 0 0 0 0;
    padding: 1% 0;
}

#slider #active {
    margin: 30% 0 0;
}
#slider #slides {
    border-radius: 0 0 0 0;
    padding: 1% 0;
}
#slider #slides .info {
    opacity: 0 !important;
}
#slider #controls label {
    transform: scale(0.6);
}

Hikin' Mike

From what I'm seeing, this doesn't display a slideshow. The user still has to click on the next slide.

jwashburn

Hikin' Mike wrote: »

From what I'm seeing, this doesn't display a slideshow. The user still has to click on the next slide.

That is correct. I didnt want it to slide manually for my usage.