Fully Responsive Background Image Slider with JS and CSS3

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()">&laquo;</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()">&raquo;</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);