Deslizador de imagen de fondo totalmente adaptable con JS y CSS3

Vista prévia

Descripción

Un deslizador de imagen de fondo totalmente receptivo y agradable que se basa en las cajas flexibles de CSS3, transiciones, transformaciones y un poco de magia de JavaScript.

Funcionamiento

Incluya el Modernizr. js necesario en la sección head del documento.

<script src="modernizr.js"></script>

Cree el código HTML para un deslizador de imagen de fondo adaptable con controles NEXT/PREV.

<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>

Los estilos CSS requeridos.

* {

-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; }

El JavaScript para habilitar el deslizador de imagen de fondo.

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);