CSS Only Content Slider – CSS Slider

CSS Slider provides a simple, CSS only solution to create a basic slider that supports any content types and CSS3 animations.

How to use it:

Include a theme CSS of your choice on the webpage.

<link rel="stylesheet" href="themes/csslider.default.css">
<!-- Or -->
<link rel="stylesheet" href="themes/csslider.dark.css">
<!-- Or -->
<link rel="stylesheet" href="build/csslider.css">

Add your own slide content together with the radio + label based navigation controls to the slider.

<div id="slider1" class="csslider">
  <input type="radio" name="slides" id="slides_1" />
  <input type="radio" name="slides" id="slides_2" checked />
  <input type="radio" name="slides" id="slides_3" />
  <input type="radio" name="slides" id="slides_4" />
  <ul>
    <li>
      <h1>Slide 1</h1>
    </li>
    <li> <img src="slide2.jpg" /> </li>
    <li>
      <h1>Slide 3</h1>
    </li>
    <li>
      <h1>Slide 4</h1>
    </li>
  </ul>
  <div class="arrows">
    <label for="slides_1"></label>
    <label for="slides_2"></label>
    <label for="slides_3"></label>
    <label for="slides_4"></label>
  </div>
  <div class="navigation">
    <div>
      <label for="slides_1"></label>
      <label for="slides_2"></label>
      <label for="slides_3"></label>
      <label for="slides_4"></label>
    </div>
  </div>
</div>

Customize the slider via LESS.

/ Main
@border-size: 10px;
@slider-inner-width: 916px - 2*@border-size;
@slider-inner-height: 483px - 2*@border-size;
@slider-main-color: #71ad37;
@slider-back-color: #3A3A3A;
@max-slides: 10;
// Dot
@dot-outer-size: 4px;
@dot-inner-size: 6px;
@dot-distance: 4px;
@dot-distance-top: 10px;
@dot-main-color: @slider-main-color;
@dot-back-color: @slider-back-color;
// Arrow
@arrow-type: 'lite'; // standard | lite
@arrow-size: 13px;
@arrow-distance: 15px;
@arrow-hover-shift: 0px;
@arrow-color: @slider-back-color;
@arrow-hover-color: @slider-main-color;
@speed: .5s;
@easing: cubic-bezier(.4,1.3,.65,1); // ease-out