Slider de pantalla completa minimalista con JavaScript puro

Vista prévia

Descripción

Un superpequeño, sensible, ventana completa contentslider que le permite cambiar entre un grupo de elementos de bloque con las flechas de navegación siguiente/anterior.

Funcionamiento

Compile la estructura de marcado para el control deslizante.

<div class="wrapper">

<div id="left-arrow" class="arrow"></div>

<div id="slider">


<div class="image image-one">



<div class="vertical-align-wrapper">




<span>Slide 1</span>



 </div>


</div>


<div class="image image-two">



<div class="vertical-align-wrapper">




 <span>Slide 2</span>



 </div>


</div>


<div class="image image-three">



<div class="vertical-align-wrapper">




 <span>Slide 3</span>



 </div>


</div>

</div>

<div id="right-arrow" class="arrow"></div>
</div>

El núcleo CSS/CSS3 estilos para el deslizador.

body, .wrapper, #slider, .image, .vertical-align-wrapper {

width: 100%;

height: 100vh;
}

.wrapper { position: relative; }

.arrow {

cursor: pointer;

position: absolute;

width: 0;

height: 0;

border-style: solid;

top: 50%;

margin-top: -50px;
}

#left-arrow {

border-width: 50px 40px 50px 0;

border-color: transparent #ffffff transparent transparent;

left: 0;

margin-left: 25px;
}

#right-arrow {

border-width: 50px 0 50px 40px;

border-color: transparent transparent transparent #ffffff;

right: 0;

margin-right: 25px;
}

.image {

background-size: cover;

background-position: center;

background-repeat: no-repeat;
}

.vertical-align-wrapper {

display: table;

overflow: hidden;

text-align: center;
}

.vertical-align-wrapper span {

display: table-cell;

vertical-align: middle;

font-size: 5rem;

color: #ffffff;
}

@media only screen and (max-width : 992px) {

.vertical-align-wrapper span { font-size: 2.5rem; }

#left-arrow {

border-width: 30px 20px 30px 0;

margin-left: 15px;
}

#right-arrow {

border-width: 30px 0 30px 20px;

margin-right: 15px;
}

.arrow { margin-top: -30px; }
}

Añada imágenes de fondo a las diapositivas.

.image-one { background-image: url("images/1.jpg"); }

.image-two { background-image: url("images/2.jpg"); }

.image-three { background-image: url("images/3.jpg"); }

El núcleo JavaScript para activar el control deslizante.

(function () {

var sliderImages = document.querySelectorAll('.image'),



arrowLeft = document.querySelector('#left-arrow'),



arrowRight = document.querySelector('#right-arrow'),



currentImg = 0;


function initSlider() {



resetSlider();




sliderImages[0].style.display = 'block';

}


function resetSlider() {



for (var i = 0; i < sliderImages.length; i++) {





sliderImages[i].style.display = 'none';



}

}


function toLeft() {



resetSlider();



sliderImages[currentImg - 1].style.display = 'block';



currentImg--;

}


function toRight() {



resetSlider();



sliderImages[currentImg + 1].style.display = 'block';



currentImg++;

}


arrowLeft.addEventListener('click', function () {



if (currentImg === 0) {





currentImg = sliderImages.length;



}




toLeft();

});


arrowRight.addEventListener('click', function () {



if (currentImg === sliderImages.length - 1) {





currentImg = -1;



}




toRight();

});


initSlider();
})();