Programmer Community

Pure CSS3 Slider with Multiple Animation Options

Mohammed Khan's photo
Mohammed Khan
·

2 min read

A pure CSS3 slider comes up with multiple animation options which can be used as per your design need. The slider is dead simple, clean and modern. It easy to customize and fully responsive to small and medium devices.

If you are building a responsive layout for your website, simply call this slider into a container for fixed width and if you want it to be fullscreen background slider then add it without a container.

It is auto-rotating photo slideshow which comes up with custom caption titles and text. It also has dot navigation for easy to navigation between each slide.

How to Make CSS3 Slider With Animation

You have five different version which is easy to choose, All you need to call different CSS file and the HTML will stay same. Each of CSS file provides different slide effects. It includes the following CSS files.

  • Default Style: slider-def

  • Bottom to Top: slider-btt.css

  • Left to Right: slider-ltr.css

  • Light Version: slider-simp.css

  • Top to Bottom: slider-ttb.css

Simply add the CSS file as per your choice inside the header.

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

Next and the only thing 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>

Finally, simply add your own images and change the caption content and enjoy!

CSS