Silky Smooth Background Image Silder With CSS3 Keyframes


Author: stephenscaff
Views Total: 3,571 views
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); }
...

See also  Super Smooth Accordion with Pure CSS / CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *