Pure CSS3 Image Slider with 5 Transition Animations

Preview:

Description:

A pure CSS / CSS3 image slider component that comes with 5 transition effects for your special design needs.

How to use it:

Insert the default style sheet into your project.

• 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 : No pagination bullets

<link rel="stylesheet" href="style/slider-def.css">

The required markup structure for the image slider.

<div id="slider">
  <div class="slides">
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Slide 1</h1>
          <h2>This is slide 1</h2>
        </div>
      </div>
      <div class="image">
        <img src="img/1.jpg">
      </div>
    </div>
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Slide 2</h1>
          <h2>This is slide 2</h2>
        </div>
      </div>
      <div class="image">
        <img src="img/2.jpg">
      </div>
    </div>
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Slide 3</h1>
          <h2>This is slide 3</h2>
        </div>
      </div>
      <div class="image">
        <img src="img/3.jpg">
      </div>
    </div>
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Slide 4</h1>
          <h2>This is slide 4</h2>
        </div>
      </div>
      <div class="image">
        <img src="img/4.jpg">
      </div>
    </div>
  </div>
  <div class="switch">
    <ul>
      <li>
        <div class="on"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>