Silky Smooth Background Image Silder With CSS3 Keyframes

Category: CSS & CSS3 , Recommended , Slideshow | May 15, 2015
Author: stephenscaff
Views Total: 4,384
Official Page: Go to website
Last Update: May 15, 2015
License:

Preview:

Silky Smooth Background Image Silder With CSS3 Keyframes

Description:

A pure CSS solution to create fullscreen background image slider / slideshow with CSS3 powered smooth transitions effects.

How to use it:

Include the required stylesheet in the head section of the html document.

<link rel="stylesheet" href="css/app.css">

Build the html structure for the background image slider.

<section class="sect-banner"> 
  <!-- Slider animation -->
  <ul class="kf-slider">
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="v-center">
    <h1>Slider Title</h1>
    <p>Slider Description</p>
  </div>
</section>

Change the background images to yours.

.sect-banner ul.kf-slider li { background-image: url(../images/banner-1.jpg); }

...

You Might Be Interested In:


One thought on “Silky Smooth Background Image Silder With CSS3 Keyframes

  1. Todd Leishman

    Great Slideshow! How can I make each slide clickable to an external link?

    Reply

Leave a Reply