...

View Full Version : Is there any way to make a CSS 3 slider slide automatically on a timed basis?



elitis
11-14-2011, 10:46 PM
Is there any way to make a CSS 3 slider slide between the multiple images automatically on a timed basis? Is this possible? Or would I need to use javascript/JQUERY?

In case it helps, here is the css 3 slider code (I didn't make it):

@-moz-keyframes fadeIn
{
0%
{
opacity: 0;
}
50%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}

@-webkit-keyframes fadeIn
{
0%
{
opacity: 0;
}
50%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}

ul#slider
{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px;
height: 438px;
overflow: hidden;
}

ul#thumb
{
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px;
}

ul#thumb a
{
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 35px;
height: 35px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}

ul#thumb a:hover
{
opacity: 1;
}

ul#slider li
{
width: 700px;
height: 438px;
position: absolute;
}

ul#slider li p
{
position: absolute;
bottom: 0;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}

ul#slider li p span
{
line-height: 1.2em;
padding: 10px;
display: block;
}

/* Animation for the :target image. Slides the image in. */
@-moz-keyframes moveTarget
{
0%
{
left:-700px;
}
100%
{
left:0px;
}
}

@-webkit-keyframes moveTarget
{
0%
{
left:-700px;
}
100%
{
left:0px;
}
}

ul#slider li:target
{
-moz-animation-name: moveTarget;
-webkit-animation-name: moveTarget;
-moz-animation-duration: .5s;
-webkit-animation-duration: .5s;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}
/*
Animation for the current image. Slides it out and back to the starting position.
Adds a lower z-index than the now current image.
*/

@-moz-keyframes moveIt
{
0%
{
left:0px;
}
50% {
left:700px;
}

100% {
left:-700px;
z-index: 5;
}
}

@-webkit-keyframes moveIt
{
0%
{
left:0px;
}
50% {
left:700px;
}

100% {
left:-700px;
z-index: 5;
}
}

ul#slider li:not(:target)
{
-moz-animation-name: moveIt;
-webkit-animation-name: moveIt;
-moz-animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}

sunfighter
11-15-2011, 03:05 PM
Any time you want to change something on a page that has been rendered you have to use javascript.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum