Fullscreen Image Slider With Pure CSS

Category: CSS & CSS3 , Slider | July 14, 2016
Author: Rohanhacker
Views Total: 1,275 views
Official Page: Go to website
Last Update: July 14, 2016
License: MIT

Preview:

Fullscreen Image Slider With Pure CSS

Description:

A pure HTML/CSS fullscreen slider component that uses radio inputs to switch between images. Heavily based on CSS3 transitions and transforms.

How to use it:

Build the html structure for the fullscreen slider.

<div class="container">
  <input type="radio" id="s1" name="slides" checked="checked"/>
  <section class="slide slide1">
    <h2>Heading One</h2>
  </section>
  <input type="radio" id="s2" name="slides"/>
  <section class="slide slide2">
    <h2>Heading Twol</h2>
  </section>
  <input type="radio" id="s3" name="slides"/>
  <section class="slide slide3">
    <h2>Heading Three</h2>
  </section>
</div>

The core CSS/CSS3 styles.

.container {
  color: white;
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw
}

.container h2 {
  text-align: center;
  font-size: 4.6em;
  color: white;
  font-family: 'Anton', sans-serif
}

.container input[type="radio"] {
  position: absolute;
  z-index: 10;
  top: 90%
}

.container #s1 { left: 40% }

.container #s2 { left: 50% }

.container #s3 { left: 60% }

.container .slide {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 100%;
  transition: left 0s 1s
}

.container [id^="s"]:checked+.slide {
  transition: all 0.65s ease-out;
  left: 0;
  z-index: 3
}

.container [id^="s"]:checked+.slide h2 {
  transition: transform 0.82s 0.5s ease, opacity 0.8s 0.7s ease;
  opacity: 1;
  transform: translateY(0)
}

Add custom background images to the slides.

.container .slide1 {
  background-image: url("1.jpg");
  background-size: cover
}

.container .slide1 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

.container .slide2 {
  background-image: url("2.jpg");
  background-size: cover
}

.container .slide2 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

.container .slide3 {
  background-image: url("3.jpg");
  background-size: cover
}

.container .slide3 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

 

You Might Be Interested In:


Leave a Reply