Material diseño deslizador de contenido con JavaScript y CSS3

Vista prévia

Descripción

Un deslizador de contenido inspirado en material Design con una animación de pegajoso Cool en puntos de navegación, hecho usando JavaScript y CSS3.

Funcionamiento

Agregue el contenido de la diapositiva junto con los puntos de navegación en el control deslizante.

<div class="slider" data-pos="0">

<div class="slider__slides">


<div class="slider__slide"></div>


<div class="slider__slide"></div>


<div class="slider__slide"></div>


<div class="slider__slide"></div>

</div>

<div class="slider__dots">


<a href="#" class="slider__indicator"></a>


<a href="#" class="slider__dot" data-pos="0"></a>


<a href="#" class="slider__dot" data-pos="1"></a>


<a href="#" class="slider__dot" data-pos="2"></a>


<a href="#" class="slider__dot" data-pos="3"></a>

</div>
</div>

El núcleo CSS/CSS3 para el deslizador.

.slider {

position: relative;

width: 100%;

height: 100%;

overflow: hidden;
}

.slider__slides {

position: relative;

width: 400%;

height: 100%;

-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);

transition: -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);

transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);

transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1), -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);

will-change: transform;
}

.slider[data-pos="0"] .slider__slides {

-webkit-transform: translateX(0%);

transform: translateX(0%);
}

.slider[data-pos="1"] .slider__slides {

-webkit-transform: translateX(-25%);

transform: translateX(-25%);
}

.slider[data-pos="2"] .slider__slides {

-webkit-transform: translateX(-50%);

transform: translateX(-50%);
}

.slider[data-pos="3"] .slider__slides {

-webkit-transform: translateX(-75%);

transform: translateX(-75%);
}

.slider__slide {

float: left;

width: 25%;

height: 100%;
}

.slider__dots {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

position: absolute;

bottom: 1.5em;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);
}

.slider__dot, .slider__indicator {

display: block;

margin: 0 0.5em;

width: 1em;

height: 1em;

background: rgba(255, 255, 255, 0.5);

border-radius: 100px;
}

.slider__indicator {

position: absolute;

background: white;

width: auto;
}

.slider__indicator--left {

-webkit-transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);

transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

.slider__indicator--right {

-webkit-transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15);

transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

.slider[data-pos="0"] .slider__indicator {

left: 0em;

right: 6em;
}

.slider[data-pos="1"] .slider__indicator {

left: 2em;

right: 4em;
}

.slider[data-pos="2"] .slider__indicator {

left: 4em;

right: 2em;
}

.slider[data-pos="3"] .slider__indicator {

left: 6em;

right: 0em;
}

El núcleo JavaScript para activar el control deslizante.

var dots = 4;
var sliderElem = document.querySelector('.slider');
var dotElems = sliderElem.querySelectorAll('.slider__dot');
var indicatorElem = sliderElem.querySelector('.slider__indicator');
Array.prototype.forEach.call(dotElems, function (dotElem) {


dotElem.addEventListener('click', function (e) {




var currentPos = parseInt(sliderElem.getAttribute('data-pos'));




var newPos = parseInt(dotElem.getAttribute('data-pos'));




var newDirection = newPos > currentPos ? 'right' : 'left';




var currentDirection = newPos < currentPos ? 'right' : 'left';




indicatorElem.classList.remove('slider__indicator--' + currentDirection);




indicatorElem.classList.add('slider__indicator--' + newDirection);




sliderElem.setAttribute('data-pos', newPos);


});
});