Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Simple slideshow using css3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 786
    Comment on it

    A slider is possible using javascript but here in this blog we are using the pure css3 code for making transition to the images that is used in a slider. This is known as a magic of keyframe. CSS3 animation make it possible to animate transition by using keyframe, Basically it includes two components
    1) A set of keyframes that includes the start and end time.  
    2) A style describing the CSS3 animation including HTML for describing the image and its caption.

    CSS3 Keyframe animation includes the timing function:-

    @keyframes slidy {
    0%  { left : 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100%{left:-400%; }
    }

    It adds animation to the slider, when we assign transition property to it and  connect  animation to each image. The first image is set at {left : 0%}, so its start from the left and then it will be same at 20%, when it reaches at 25% the image will move like this that it is a slider back to back images will float on the screen and giving effects like a slider.

    Following are the complete source code that will be helpful in understanding the concept of css3 slider.

    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    @keyframes slidy {
    0%  { left : 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100%{left:-400%; }
    }
    body,figure { 
      margin: 0; 
      background: #101010;
      font-family: Istok Web, sans-serif;
      font-weight: 100;
    }
    div#captioned-gallery { 
      width: 100%; 
      overflow: hidden; 
    }
    figure.slider { 
      position: relative;
      width: 500%;
      font-size: 0; animation: 20s slidy infinite; 
    }
    figure.slider figure { 
      width: 20%; 
      height: auto;
      display: inline-block;  
      position: inherit; 
    }
    figure.slider img { width: 100%; height: auto; }
    figure.slider figure figcaption { 
      position: absolute; 
      bottom: 0;
      background: rgba(0,0,0,0.4);
      color: #fff; 
      width: 100%;
      font-size: 2rem; 
      padding: .6rem; 
    }
    </style>
    
    </head>
    <body>
    <div id="captioned-gallery">
        <figure class="slider">
            <figure>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
                <figcaption>Hobbiton, New Zealand</figcaption>
            </figure>
            <figure>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wanaka-drowned-tree.jpg" alt>
                <figcaption>Wanaka, New Zealand</figcaption>
            </figure>
                <figure>
                <img src="http://www.indiatraveltours.com/images/the-taj-mahal.jpg" alt>
                <figcaption>Tajmahal, India</figcaption>
                </figure>
            <figure>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/utah-peak.jpg" alt>
                <figcaption>Utah, United States</figcaption>
            </figure>
            <figure>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/bryce-canyon-utah.jpg" alt>
                <figcaption>Bryce Canyon, Utah, United States</figcaption>
            </figure>
        </figure>
    </div>
    </body>
    </html>

     

 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: