Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • An Animated Slideshow Using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 300
    Comment on it

    Hello, readers . In today's Blog I have created An Animated Slideshow using CSS3. Basically a Slideshow is comprises of various slides which keeps on rotating and display images one at a time .

     

    So here in my blog I have tried to create a slideshow without javascript.

     

    In my example, I have used number of images creating an unodered list inside a div .

     

    With the help of CSS3 @keyframe and animation property, I have tried to create it.Below is the html code for the example :-

     

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <title>Slideshow Using CSS</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    
    <body>
    
    <div class="container">
    
    <h1>Pure CSS Slider</h1>
    
    <ul class="slider">
    
    <li><a href="#">
    
    <img src="images/img01.png" alt="img-01">
    
    </a>
    
    </li>
    
    <li><a href="#">
    
    <img src="images/img02.png" alt="img-02">
    
    </a>
    
    </li>
    
    <li><a href="#">
    
    <img src="images/img03.png" alt="img-03">
    
    </a>
    
    </li>
    
    <li><a href="#">
    
    <img src="images/img04.png" alt="img-04">
    
    </a>
    
    </li>
    
    <li><a href="#">
    
    <img src="images/img05.png" alt="img-05">
    
    </a>
    
    </li>
    
    </ul>
    
    <p>Mouse over the slide to stop the animation.</p>
    
    </div>
    
    </body>
    
    </html>

     

    In the CSS , To the slider class as well as to its li I have set the height and width and display as inline -block .

     

    I have set the @keyframe property to the slider class at various percentages by setting its margin-left property at various intervals.

     

    Now to the first-child of the <li> I have used slider animation, time duration for 20s for infinite iteration time.

     

    We can also pause the animation for this I have applied animation-play-state to pause at hover effect over the slides.

     

    Below is the CSS code for the example:-

     

    
    
    body {
    
    font: normal 14px Helvetica Neue, Arial, sans-serif;
    
    background: #fafafa;
    
    }
    
    h1 {
    
    font-weight: 200;
    
    font-size: 36px;
    
    text-align: center;
    
    color: #333;
    
    }
    
    p {
    
    color: #aaa;
    
    text-align: right;
    
    }
    
    .container {
    
    width: 800px;
    
    margin: auto;
    
    }
    
    
    
    
    
    /* Slider */
    
    .slider,
    
    .slider li {
    
    width: 800px;
    
    height: 300px;
    
    }
    
    
    
    .slider {
    
    overflow: hidden;
    
    list-style: none;
    
    padding: 0;
    
    margin: 0;
    
    white-space: nowrap;
    
    border-radius: 3px;
    
    word-spacing: -2px; /* removing inline elements spacing */
    
    letter-spacing: -2px;
    
    }
    
    
    
    .slider li {
    
    display: inline-block;
    
    word-spacing: normal; /* inline elements spacing */
    
    letter-spacing: normal;
    
    }
    
    
    
    @keyframes slider {
    
    0%, 18% {margin-left: 0;}
    
    20%, 38% {margin-left: -100%;}
    
    40%, 58% {margin-left: -200%;}
    
    60%, 78% {margin-left: -300%;}
    
    80%, 99.9% {margin-left: -400%;}
    
    100% {margin-left: 0;}
    
    }
    
    @-webkit-keyframes slider {
    
    0%, 18% {margin-left: 0;}
    
    20%, 38% {margin-left: -100%;}
    
    40%, 58% {margin-left: -200%;}
    
    60%, 78% {margin-left: -300%;}
    
    80%, 99.9% {margin-left: -400%;}
    
    100% {margin-left: 0;}
    
    }
    
    .slider li:first-child {
    
    animation: slider 20s ease-out infinite;
    
    -webkit-animation: slider 20s ease-out infinite;
    
    }
    
    
    
    /* pause animation on mouse over */
    
    .slider:hover li:first-child {
    
    animation-play-state:paused;
    
    -webkit-animation-play-state: paused;
    
    }

    Conclusion :-

    Hence, An animated Slideshow has been created using CSS3 properties which is easy to understand and create.

     

    Note:-The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: