Presentación de imágenes de pantalla completa en JavaScript nativo

Vista prévia

Descripción

Sólo otra presentación de diapositivas de pantalla completa y receptiva escrita en JS puro que se desvanece automáticamente a través de un grupo de imágenes a una velocidad determinada.

Funcionamiento

Añade imágenes, flechas de navegación y puntos de paginación a la presentación.

<section id="slider-container">


<!-- slide -->

<div class="slide fade" id="slide-0">


<!-- slide image -->


<img src="./images/img1.jpg" alt="First Image">

</div>

<!-- slide -->

<div class="slide fade" id="slide-1">


<!-- slide image -->


<img src="./images/img2.jpg" alt="Second Image">

</div>

<!-- slide -->

<div class="slide fade" id="slide-2">


<!-- slide image -->


<img src="./images/img3.jpg" alt="Third Image">

</div>


<!-- arrows -->

<div id="arrows-wrapper" class="">



<!-- previous arrow -->


<p class="slider-arrow center_y" id="arrow-prev">&#10094;</p>


<!-- next arrow -->


<p class="slider-arrow center_y" id="arrow-next">&#10095;</p>


</div>


<!-- dots -->

<div id="dots-wrapper" class="center_x">



<!-- dot navigation for each slide -->


<div class="dot-navigation"></div>


<!-- dot navigation for each slide -->


<div class="dot-navigation"></div>


<!-- dot navigation for each slide -->


<div class="dot-navigation"></div>









 </div>
</section>

Los estilos CSS necesarios. Siéntase libre de modificar, invalidar los siguientes fragmentos de código para crear sus propios estilos de presentación de diapositivas.

#slider-container{

width: 100%;

height: 100%;

position: relative;

overflow: hidden;
}

.slide{

width: 100%;

height: 100%;


}

.slide img{

width: 100%;

height: 100%;

object-fit: cover;
}

.slide{

position: absolute;
}

.slider-arrow {

color: #fff;

font-size: 50px;

cursor: pointer;
}

#arrow-prev{

left: 20px;

position: absolute;
}

#arrow-next{

right: 20px;

position: absolute;
}

#dots-wrapper{

display: flex;

position: absolute;

bottom: 30px;
}

.dot-navigation{

width: 15px;

height: 15px;

border-radius: 100%;

cursor: pointer;

margin: 0 4px;

border: 2px solid whitesmoke;

transition: .5s background-color;
}

.dot-navigation:hover{

background-color: cornflowerblue;
}

/* creating class active-dot which will get add into the dot that indicates what image is displayed */
.active-dot {

background-color: rosybrown;
}

/* fade animation */
.fade{

animation-name: fade;

animation-duration: .5s;
}

@keyframes fade{

from {opacity: .4}

to {opacity: 1}
}

El principal JavaScript para habilitar la proyección de diapositivas.

// initialize slideindex with 0 as you want to show the first slide first
var SLIDEINDEX = 0;

showSlides(SLIDEINDEX);

// creating function for showing slides
function showSlides(index){

// lets select all the slides and dots using querySelectorAll method

var slides = document.querySelectorAll(".slide");

var dots = document.querySelectorAll(".dot-navigation");

// if slide index value is greater than length of slides then jump to 1st slide

if (index >= slides.length){



SLIDEINDEX = 0;

// if we want to jump at the last of the slide incase the user is at the first one

} else if (index < 0) {



SLIDEINDEX = slides.length - 1;

} else{



SLIDEINDEX = SLIDEINDEX;

}

// before showing slides we must hide all the slides and remove active-dots class using for loop

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



// hide slide elements



slides[i].style.display = "none";



// hide dots active-dot class



dots[i].classList.remove("active-dot");

}

// show the slide we want and set the dot class active-dot

slides[SLIDEINDEX].style.display = "block";

dots[SLIDEINDEX].classList.add("active-dot");




};

// select the previous arrow element and add a click event using addEventListener method
document.querySelector("#arrow-prev").addEventListener("click", function(){

// decrement SLIDEINDEX value to go to previous slide

showSlides(--SLIDEINDEX);
});

// select the next arrow element and add a click event using addEventListener method
document.querySelector("#arrow-next").addEventListener("click", function(){

// decrement SLIDEINDEX value to go to previous slide

showSlides(++SLIDEINDEX);
});

// select all the dots using querySelectorAll and iterate over each one using forEach method
document.querySelectorAll(".dot-navigation").forEach(function(element){

element.addEventListener("click", function(){



// make a real array using slice method from array proptotype followed by call method



var dots = Array.prototype.slice.call(this.parentElement.children);



// make a dot index variable of the array we have created above



var dotIndex = dots.indexOf(element);




// save slideindex value to dot index



showSlides(SLIDEINDEX = dotIndex);

});
});

// lets set our slide automatic using setInterval method
setInterval(function(){

showSlides(++SLIDEINDEX);
}, 5000);