Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts

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

    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):
    Code:
    @-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;
    }
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,226
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Any time you want to change something on a page that has been rendered you have to use javascript.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •