Pure CSS3 Image Slider with 5 Transition Animations

Category: CSS & CSS3 , Recommended , Slider | August 31, 2015
Author:Elitewares
Views Total:3,956 views
Official Page:Go to website
Last Update:August 31, 2015
License:MIT

Preview:

Pure CSS3 Image Slider with 5 Transition Animations

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>

You Might Be Interested In:


Leave a Reply