Author: | rendro |
---|---|
Views Total: | 2,740 views |
Official Page: | Go to website |
Last Update: | August 15, 2014 |
License: | MIT |
Preview:

Description:
A fully responsive and nice looking background image slider built on top of CSS3 flexible boxes, transitions, transforms and a little Javascript magic.
How to use it:
Include the necessary modernizr.js in the head section of the document.
<script src="modernizr.js"></script>
Create the Html for a responsive background image slider with next/prev controls.
<div class="wrap"> <button onclick="prev()">«</button> <div class="scroller"> <ul class="items"> <li class="item" style="background-image:url(1.jpg);">Image 1</li> <li class="item" style="background-image:url(2.jpg);">Image 2</li> <li class="item" style="background-image:url(3.jpg);">Image 3</li> </ul> </div> <button onclick="next()">»</button> </div>
The required CSS styles.
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; width: 90%; margin: auto; } button { width: 30px; border: none; background: transparent; color: #fff; font-size: 40px; text-align: center; outline: none; opacity: 0.5; -webkit-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out; } button:hover { opacity: 1; } .scroller { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } .items { list-style-type: none; white-space: nowrap; font-size: 0; line-height: 0; -webkit-transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; } .item { padding: 30px 20px; display: inline-block; width: 100%; height: 250px; font-size: 25px; letter-spacing: -0.03em; line-height: 1; font-weight: bold; -webkit-background-size: cover; background-size: cover; background-position: 50% 50%; text-transform: uppercase; -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); } .item:nth-child(2) { color: #fff; }
The Javascript to enable the background image slider.
var d = document; var wrap = d.querySelector('.wrap'); var items = d.querySelector('.items'); var itemCount = d.querySelectorAll('.item').length; var scroller = d.querySelector('.scroller'); var pos = 0; var transform = Modernizr.prefixed('transform'); function setTransform() { items.style[transform] = 'translate3d(' + (-pos * items.offsetWidth) + 'px,0,0)'; } function prev() { pos = Math.max(pos - 1, 0); setTransform(); } function next() { pos = Math.min(pos + 1, itemCount - 1); setTransform(); } window.addEventListener('resize', setTransform);