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
    • 829
    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:-

    1. @keyframes slidy {
    2. 0% { left : 0%; }
    3. 20% { left: 0%; }
    4. 25% { left: -100%; }
    5. 45% { left: -100%; }
    6. 50% { left: -200%; }
    7. 70% { left: -200%; }
    8. 75% { left: -300%; }
    9. 95% { left: -300%; }
    10. 100%{left:-400%; }
    11. }

    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.

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <style>
    5. @keyframes slidy {
    6. 0% { left : 0%; }
    7. 20% { left: 0%; }
    8. 25% { left: -100%; }
    9. 45% { left: -100%; }
    10. 50% { left: -200%; }
    11. 70% { left: -200%; }
    12. 75% { left: -300%; }
    13. 95% { left: -300%; }
    14. 100%{left:-400%; }
    15. }
    16. body,figure {
    17. margin: 0;
    18. background: #101010;
    19. font-family: Istok Web, sans-serif;
    20. font-weight: 100;
    21. }
    22. div#captioned-gallery {
    23. width: 100%;
    24. overflow: hidden;
    25. }
    26. figure.slider {
    27. position: relative;
    28. width: 500%;
    29. font-size: 0; animation: 20s slidy infinite;
    30. }
    31. figure.slider figure {
    32. width: 20%;
    33. height: auto;
    34. display: inline-block;
    35. position: inherit;
    36. }
    37. figure.slider img { width: 100%; height: auto; }
    38. figure.slider figure figcaption {
    39. position: absolute;
    40. bottom: 0;
    41. background: rgba(0,0,0,0.4);
    42. color: #fff;
    43. width: 100%;
    44. font-size: 2rem;
    45. padding: .6rem;
    46. }
    47. </style>
    48.  
    49. </head>
    50. <body>
    51. <div id="captioned-gallery">
    52. <figure class="slider">
    53. <figure>
    54. <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
    55. <figcaption>Hobbiton, New Zealand</figcaption>
    56. </figure>
    57. <figure>
    58. <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wanaka-drowned-tree.jpg" alt>
    59. <figcaption>Wanaka, New Zealand</figcaption>
    60. </figure>
    61. <figure>
    62. <img src="http://www.indiatraveltours.com/images/the-taj-mahal.jpg" alt>
    63. <figcaption>Tajmahal, India</figcaption>
    64. </figure>
    65. <figure>
    66. <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/utah-peak.jpg" alt>
    67. <figcaption>Utah, United States</figcaption>
    68. </figure>
    69. <figure>
    70. <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/bryce-canyon-utah.jpg" alt>
    71. <figcaption>Bryce Canyon, Utah, United States</figcaption>
    72. </figure>
    73. </figure>
    74. </div>
    75. </body>
    76. </html>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: