Home

Awesome

DEMO

CSS3-Slider

Pure CSS3 Slider with multiple animation options

Its easy to choose a version, all you have to do is call a different CSS file, the HTML is the same (except in the light version, where there is no legend or bullets)

Different CSS files are for different slide effects slider-def.css : Default slider-ltr.css : Left to right slider-ttb.css : Top to bottom slider-btt.css : Bottom to top slider-simp.css : Light

Example of use

<head> 
  ... <!-- Your stuff --> 
  <link rel="stylesheet" href="style/slider-def.css"> 
</head>

And the only thing rest is adding the HTML

<div id="slider">
   <div class="slides">
      <!-- First slide --> 
      <div class="slider">
         <div class="legend"></div>
         <div class="content">
            <div class="content-txt">
               <h1> Your title </h1>
               <h2> Your description </h2>
            </div>
         </div>
         <div class="images"> 
            <img src="ImagePath/ImageName.jpg"> 
         </div>
      </div>
      <!-- Second slide --> 
      <div class="slider">
         <div class="legend"></div>
         <div class="content">
            <div class="content-txt">
               <h1> Your title </h1>
               <h2> Your description </h2>
            </div>
         </div>
         <div class="images"> 
            <img src="ImagePath/ImageName.jpg"> 
         </div>
      </div>
      <!-- Third slide --> 
      <div class="slider">
         <div class="legend"></div>
         <div class="content">
            <div class="content-txt">
               <h1> Your title </h1>
               <h2> Your description </h2>
            </div>
         </div>
         <div class="images"> 
            <img src="ImagePath/ImageName.jpg"> 
         </div>
      </div>
      <!-- Fourth slide --> 
      <div class="slider">
         <div class="legend"></div>
         <div class="content">
            <div class="content-txt">
               <h1> Your title </h1>
               <h2> Your description </h2>
            </div>
         </div>
         <div class="images"> 
            <img src="ImagePath/ImageName.jpg"> 
         </div>
      </div>
   </div>
</div>