Control deslizante de imagen de JS/CSS puro con un efecto de enmascaramiento

Vista prévia

Descripción

Un deslizador de imagen de JavaScript puro que viene con un sutil efecto de enmascaramiento usando la propiedad de ruta de clip CSS.

Funcionamiento

Cargue los ionicons para las flechas de navegación de su deslizador de imagen.

<link rel='stylesheet' href='ionicons.min.css'>

Cree el control deslizante de imagen con subtítulos utilizando HTML5 figure y figcaption Tags.

<div class="slider-ctr">

<figure class="slide"><img src="1.jpeg">


<figcaption>



 <div class="title">Image 1</div>



<div class="author">Author 1</div>


</figcaption>

</figure>

<figure class="slide"><img src="2.jpeg">


<figcaption>



 <div class="title">Image 2</div>



<div class="author">Author 2</div>


</figcaption>

</figure>

<figure class="slide"><img src="3.jpeg">


<figcaption>



<div class="title">Image 3</div>



<div class="author">Author 3</div>


</figcaption>

</figure>

<figure class="slide text-on"><img src="4.jpeg">


<figcaption>



<div class="title">Image 4</div>



<div class="author">Author 4</div>


</figcaption>

</figure>

<div class="slider-control">


<div class="control prev disabled">



<div class="icon ion-chevron-left"></div>


</div>


<div class="control next">



<div class="icon ion-chevron-right"></div>


</div>

</div>
</div>

Los principales estilos CSS/CSS3 para el deslizador y su contenido interno.

.slider-ctr {

width: 700px;

height: 440px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -220px;

margin-left: -350px;

box-sizing: border-box;

border: 10px solid white;

border-radius: 5px;

overflow: hidden;

box-shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.15), 0 5px 20px 3px rgba(0, 0, 0, 0.1);
}

.slider-ctr:after {

content: "";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);

background: -webkit-linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);

pointer-events: none;

z-index: 9;
}

.slide {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

transition: 0.45s all cubic-bezier(0.65, 0.05, 0.36, 1);

-webkit-clip-path: inset(0 0 0 0);

clip-path: inset(0 0 0 0);
}

.slide:before {

content: "";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0, 0, 0, 0.125);
}

.slide.slide-on {

-webkit-clip-path: inset(0 100% 0 0);

clip-path: inset(0 100% 0 0);
}

.slide.text-on .title {

transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;

-webkit-clip-path: inset(0 0 0 0);

clip-path: inset(0 0 0 0);
}

.slide.text-on .author {

transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.6s;

-webkit-clip-path: inset(0 0 0 0);

clip-path: inset(0 0 0 0);
}

.slide img { display: block; }

.slide figcaption {

position: absolute;

top: 30px;

left: 30px;
}

.slide .title {

font-size: 50px;

margin-bottom: 2px;

color: white;

transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;

-webkit-clip-path: inset(0 0 0 100%);

clip-path: inset(0 0 0 100%);

font-weight: 400;

letter-spacing: 10px;

text-transform: uppercase;

position: relative;
}

.slide .author {

font-size: 16px;

color: white;

opacity: .8;

transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;

-webkit-clip-path: inset(0 0 0 100%);

clip-path: inset(0 0 0 100%);

font-weight: 300;

letter-spacing: 3px;

position: relative;

z-index: 9;
}

Estilo del control de navegación del control deslizante.

.slider-control {

position: absolute;

right: 30px;

bottom: 30px;

width: 80px;

overflow: hidden;

border-radius: 3px;

box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.15);

z-index: 99;
}

.slider-control .control {

width: 50%;

height: 40px;

display: block;

float: left;

text-align: center;

line-height: 40px;

cursor: pointer;

transition: .3s all ease;

background: white;
}

.slider-control .control .icon {

pointer-events: none;

transition: .3s all ease;
}

.slider-control .control.disabled {

pointer-events: none;

background: #ddd;
}

.slider-control .control.disabled .icon { opacity: .5; }

El núcleo JavaScript para activar el deslizador de imagen.

// buttons
var sliderControl = document.querySelector(".slider-control");

// slides informations
var slides = document.querySelectorAll(".slide"),


slidesLength = slides.length;

// slides array
var slidesArr = [].slice.call(slides);

// reverse array sorting
slidesArr = slidesArr.reverse();

// slide current
var slideCurrent = 0;

sliderControl.addEventListener("click", function(e){

target = e.target;



// get next button

if(target.classList.contains("next")){



next = e.target,


prev = next.previousElementSibling,


nextSlide = slidesArr[slideCurrent + 1],


slide = slidesArr[slideCurrent];





slide.classList.add("slide-on");


slide.classList.remove("text-on");


nextSlide.classList.add("text-on");





slideCurrent += 1;





if(slideCurrent > 0) {



prev.classList.remove("disabled");


}





if(slideCurrent === slidesLength - 1){



next.classList.add("disabled");


}

}



// get prev button

if(target.classList.contains("prev")){





slideCurrent -= 1;





prev = e.target,


next = prev.nextElementSibling,


prevSlide = slidesArr[slideCurrent + 1],


slide = slidesArr[slideCurrent];





prevSlide.classList.remove("text-on");


slide.classList.remove("slide-on");


slide.classList.add("text-on");





if(slideCurrent === slidesLength - 2){



next.classList.remove("disabled");


}



if(slideCurrent === 0){



prev.classList.add("disabled");


}




}

});