Pure CSS Content Slider with Keyboard Navigation

Category: CSS & CSS3 , Slider | June 30, 2014
Author: dp_lewis
Views Total: 3,574
Official Page: Go to website
Last Update: June 30, 2014
License: Unknown

Preview:

Pure CSS Content Slider with Keyboard Navigation

Description:

A simple and fully responsive content slider with CSS3 transitions and keyboard & arrows navigation, built with plain Html and pure CSS/CSS3. Created by dp_lewis.

How to use it:

Build the Html structure for a content slider as follows.

<form>
  <input type="radio" name="fancy"  value="slide1" id="slide1" />
  <input type="radio" name="fancy" value="slide2" id="slide2" />
  <input type="radio" name="fancy" value="slide3" id="slide3" />
  <input type="radio" name="fancy" value="slide4" id="slide4" />
  <label for="slide1">Slide 1</label>
  <label for="slide2">Slide 2</label>
  <label for="slide3">Slide 3</label>
  <label for="slide4">Slide 4</label>
</form>

The required CSS to style and animate the content slider.

label {
  background: #444;
  color: #fff;
  -webkit-transition: -webkit-transform 400ms ease-out;
  transition: transform 400ms ease-out;
  display: inline-block;
  min-height: 100%;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 100vh;
}

form {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  white-space: nowrap;
}

input { position: absolute; }

input:focus ~ .keys { opacity: 0.8; }

input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4) { z-index: 0; }

input:nth-of-type(1):checked ~ label {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

input:nth-of-type(2):checked ~ label {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

input:nth-of-type(3):checked ~ label {
  -webkit-transform: translate3d(-200%, 0, 0);
  transform: translate3d(-200%, 0, 0);
}

input:nth-of-type(4):checked ~ label {
  -webkit-transform: translate3d(-300%, 0, 0);
  transform: translate3d(-300%, 0, 0);
}

label {
  background: #444;
  -webkit-background-size: cover;
  background-size: cover;
  font-size: 3rem;
}

label:before,
label:after {
  color: white;
  display: block;
  background: rgba(255,255,255,0.2);
  position: absolute;
  padding: 1rem;
  font-size: 3rem;
  height: 10rem;
  vertical-align: middle;
  line-height: 10rem;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  cursor: pointer;
}

label:before {
  content: "\3e";
  right: 100%;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

label:after {
  content: "\3c";
  left: 100%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

One thought on “Pure CSS Content Slider with Keyboard Navigation

  1. VolanTicino

    Buongiorno. Volevo sapere se si potevano caricare tante immagini da un file PDF in questo slider. Direttamente senza caricare una immagine alla volta.

    Grazie e buona giornata.
    Max

    Reply

Leave a Reply