Comments on: Fluid CSS3 Slideshow with Parallax Effect

By: armada erwin

armada erwin — Fri, 26 Oct 2012 05:34:26 +0000

i search in google but this is amazing one,i really like this slider…

i try to add to my bloggspot but i faild… :(

if u have tutor for blooger that awsome :)

By: Abraham

Abraham — Thu, 18 Oct 2012 16:57:35 +0000

Hi with this worked in ie8:

By: KIdloco

KIdloco — Wed, 10 Oct 2012 17:56:42 +0000

Hi, very nice tutorial! Does anybody know how how to add text links instead radio buttons for the slides? Thank you!

By: pbrain

pbrain — Fri, 05 Oct 2012 08:42:43 +0000

16.67% is cleaner.

By: pbrain

pbrain — Fri, 05 Oct 2012 08:34:35 +0000

for the css selector with the extra dot (6) to keep centralized you need:
.sp-selector-1, .button-label-1 { margin-left: -36px;}
.sp-selector-2, .button-label-2 { margin-left: -18px;}
.sp-selector-4, .button-label-4 { margin-left: 0px;}
.sp-selector-5, .button-label-5 { margin-left: 18px;}
.sp-selector-6, .button-label-6 { margin-left: 36px;}

Re-calibrate if more buttons.

By: rospondek

rospondek — Fri, 14 Sep 2012 20:47:54 +0000

After a looot of trying I’ve finally… read the tutorial :D There is one thing I was missing…
Anyway here is what to do for 6 slides. Adding more is just a little math and copy’n'paste.

You have to of course fix every part of HTML and CSS in which you have slides. So add those in appropriate places for the 6 slides.
HTML:

—————————————

CSS:
.sp-selector-6, .button-label-6 {
margin-left: 54px;
}
—————————————
.sp-selector-5:checked ~ .sp-arrow.sp-a6 {
—————————————
.sp-selector-6:checked ~ .sp-arrow.sp-a5 {
—————————————
input.sp-selector-6:checked ~ .sp-content {
background-position: -500px 0;
background-color: #7d7f72; /*colour to change of course*/
}
—————————————
input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {
background-position: -1000px 0;
}
—————————————
input.sp-selector-6:checked ~ .sp-content .sp-slider {
left: -500%;
}
—————————————
input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6){

And now the most important thing. There are two values which determine the number of slides. First one is the % size of the slider so put 600% for 6 slides, 700% for 7 etc:

.sp-slider {
position: relative;
left: 0;
width: 600%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: left ease-in 0.8s;
-moz-transition: left ease-in 0.8s;
-o-transition: left ease-in 0.8s;
-ms-transition: left ease-in 0.8s;
transition: left ease-in 0.8s;
}

Second one is a little math. You have to divide 100% by the number of slides.
100/5 is 20% (which is in this tutorial)
100/6 is 16.66(6)% and this 16.6% put in the width of the .sp-slider > li:

.sp-slider > li {
color: #fff;
width: 16.66%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 0 60px;
float: left;
text-align: center;
opacity: 0.4;
-webkit-transition: opacity ease-in 0.4s 0.8s;
-moz-transition: opacity ease-in 0.4s 0.8s;
-o-transition: opacity ease-in 0.4s 0.8s;
-ms-transition: opacity ease-in 0.4s 0.8s;
transition: opacity ease-in 0.4s 0.8s;
}

After that everything is magically working! I hope everything is clear now :)

Now I need that to autoplay. Have no idea how to do that but will have to work with php and maybe autochecking the radiobuttons… I don’t know yet…

By: Charlie

Charlie — Tue, 11 Sep 2012 22:45:15 +0000

@Mo For IOS/iPhone/iPad you can add [onclick=""] as an attribute to the label (with the “for” attribute) used for the arrows to trigger the input selection.

By: clement

clement — Mon, 10 Sep 2012 12:37:17 +0000

Hi and thx for this creation ! Another great one !!!

I tried many stuffs to add more slides, but can’t… did you find a way to do that ? Any tips ?

Thx…

By: rd Limosin

rd Limosin — Mon, 10 Sep 2012 04:54:08 +0000

nice! but how make it autoplay?

By: Dan Wareham

Dan Wareham — Fri, 07 Sep 2012 15:00:21 +0000

Awesome tutorial and I have it working nicely having changed the styles etc….
Is there a way to add a second layer so have two sets of sliding images over the background….?? I tried adding a second ordered list but this places it below everything else, even when I try to add a z-index to each one…. Any ideas anyone?