Carrucel en JavaScript, Html y CSS

¿Cómo crear un slider de imágenes en Javascript, Html y CSS?

En este apartado podrás ver como programamos un slider con ayuda de Html, Css y JavaScript, luego tendrás la oportunidad de mejorar este ejemplo


Carrucel en JavaScript, Html y CSS

¿Cómo crear un slider de imágenes en Javascript, Html y CSS?

En este apartado podrás ver como programamos un slider con ayuda de Html, Css y JavaScript, luego tendrás la oportunidad de mejorar este ejemplo

¿Qué es un Slider o Carrucel de Imágenes?

Un Carrucel o Slider es una funcionalidad web que permite mostrar una cantidad de imágenes dentro de una caja o cuadro en la página web, con efectos diversos como  fadeIn, FadeOut, Desplazamientos; son muy atractivos para crear presentaciones automáticas en la portada de una página web para mostrar promociones o simplemente el core business de la empresa, también se puede emplear en una galería de imágenes. Lo ideal es desarrollarlo sin la necesidad de cargar librerias adicionales,  otro punto es que tengan una medía de 3 a 4 imágenes por slider pues el peso de la imágenes podría ralentizar la carga completa de la página web, las imágenes deben estar optimizadas para su publicación en web.

Ahora, podremos crear un Carrucel de Imágenes sin la ayuda de una librería que pueda sobre cargar nuestro sitio web, al hacerlo con solo HTML, CSS y JAVASCRIPT.

Ahora tenemos el código HTML el cual es la estructura de nuestro Slider:

*No te  olvides de guardar tus imagenes para el slider en la misma ruta del codigo para que pueda encontrarlo

<!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="img2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="img3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

Después tenemos la parte visual el cual nos ayudara a tenerlo responsive para que nuestro Slider sea autoadaptable, este sería el código CSS:

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

Finalmente  tendremos el código JavaScript el cual nos ayuda en la parte de programación donde pondrá en funcionamiento los botones de atrás y siguiente.

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Carrucel en JavaScript, Html y CSS?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 138 veces | Publicado hace 4 meses

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019