/ JavaScript

Librerías JavaScript Para Crear Galería de Fotos y Sliders

Muchas veces necesitamos crear galerías de fotos y sliders para nuestro proyecto, esta tarea requiere demasiado tiempo realizarlo desde cero, pero para fortuna nuestra existen múltiples librerías JavaScript desarrollada por terceros las cuales facilitarán nuestra implementación de galería de fotos y sliders, de los cuales voy mencionar algunos de estas librerías JavaScript.

Con este artículo quiero informarte que en la web existen una multitud de librerías de licencia libre esperando que tu las uses.

Demo

Si aun no tienes la menor idea de lo que te estoy hablando o simplemente quieres ver el resultado final, pues el siguiente vídeo te aclarara tus dudas.


Owl Carousel

Esta es una excelente librería JavaScript que sirve para realizar sliders de una manera facíl, funciona conjuntamente con jQuery.

Esta librería como la gran mayoría hace uso de CSS para darle una presentación mas agradable y no tener que empezar desde cero.

Sin mas vamos a realizar un ejemplo de su implementación en un proyecto.

Página oficial

Puedes visitar su página web para descargar la librería y los mas importante leer su documentación.

Repositorio GitHub

Si deseas también puedes encontrar la librería en su repositorio alojado en GitHub.

Owl Carousel

Código HTML y JavaScript

Recuerden que para que funcione correctamente las rutas de los archivos como imágenes, CSS y JavaScript deben apuntar a la ubicación donde estén almacenados estos complementos.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Owl Carousel</title>
	<!--Owl Carousel-->
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">
	<style>
		/*Owl Carousel*/
		.owl-carousel{
			margin-top: 2em;
			margin-bottom: 2em;
		}
		.owl-carousel .item{
			background: linear-gradient(#69C86B,#82D584,#A0D5A1);
			min-height: 20vh;
		}
		.owl-carousel .item h4{
			background: rgba(255,255,255,.5);
			margin: 0;
			padding: 5px;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
		}
	</style>
</head>
<body>
	<div class="owl-carousel owl-theme">
    <div class="item">
    	<h4>Lorem ipsum dolor.</h4>
	    
	    <img src="images/owl-carousel/slider.jpg" alt="Lorem ipsum.">
	  </div>
	  <div class="item">
    	<h4>Lorem ipsum dolor sit.</h4>
    	<img src="images/owl-carousel/slider2.jpg" alt="Lorem ipsum dolor sit amet, consectetur.">
    </div>
    <div class="item">
    	<h4>Lorem ipsum dolor sit amet, consectetur.</h4>
    	<img src="images/owl-carousel/slider3.jpg" alt="Lorem ipsum dolor sit amet, consectetur.">
    </div>
    <div class="item">
    	<h4>Lorem ipsum dolor sit.</h4>
    	<img src="images/owl-carousel/slider4.jpg" alt="Lorem ipsum dolor sit amet, consectetur.">
    </div>
    <div class="item">
    	<h4>Lorem ipsum dolor sit amet, consectetur.</h4>
    	<img src="images/owl-carousel/slider5.jpg" alt="Lorem ipsum dolor sit amet, consectetur.">
    </div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="js/owl.carousel.min.js"></script>
	<script>
		$( document ).ready(function() {
	   //Owl Carousel
	   $('.owl-carousel').owlCarousel({
		    loop:true,
		    margin:10,
		    nav:true,
		    responsive:{
		        0:{
		            items:1
		        },
		        600:{
		            items:3
		        },
		        1000:{
		            items:4
		        }
		    }
		});
	});
	</script>

</body>
</html>

bxSlider

Esta asombrosa librería nos permite combinar imágenes y vídeos en nuestro slider, lo que lo hace uno de mis favoritos.

Antes de empezar debes de saber que esta librería hace uso de jQuery y FitVids.JS este ultimo complemento es usado siempre y cuando la opción vídeo este en true (cargar vídeos en el slider de manera responsive).

Pueden ver el uso de FitVids.JS en este post Mostrar Vídeos Responsive con FitVids.js.

Ahora vamos a implementarlo para que vean su funcionamiento.

Página oficial

Aquí puedes visitar la página web oficial de bxSlider

Repositorio GitHub

Este repositorio contiene las librerías que utilizaremos para implementar nuestro slider.

bxSlider

Código HTML y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>bxSlider</title>
	<!--bxSlider-->
	<link rel="stylesheet" href="css/jquery.bxslider.min.css">
</head>
<body>
	<div class="bxSlider">
    <div>	    
	    <img src="images/sliders/slider.jpg" alt="Lorem ipsum.">
	  </div>
	  <div>
    	<img src="images/sliders/slider2.jpg" alt="Lorem ipsum dolor sit.">
    </div>
    <div>
    	<iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
    <div>
    	<img src="images/sliders/slider4.jpg" alt="Lorem ipsum dolor.">
    </div>
    <div>
      <iframe width="500" height="281" src="https://www.youtube.com/embed/Bl8fkc4HsSs" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="js/jquery.fitvids.js"></script>
	<script src="js/jquery.bxslider.min.js"></script>
	<script>
		$( document ).ready(function() {
		  //bxSlider
	    $('.bxSlider').bxSlider({
	    	mode: 'horizontal',
	      responsive: true,
	      video:true,
	      pager: true,
	      moveSlides: 1,
	      slideMargin: 40,
	      infiniteLoop: true,
	      slideWidth: 660,
	      minSlides: 3,
	      maxSlides: 3,
	      speed: 800,
	    });
	});
	</script>
</body>
</html>

Slider Pro

Es una gran librería que sirve para crear sliders, en lo personal lo utilizo mucho ya que me ayuda a implementar fácilmente sliders con una apariencia profesional.

Esta librería también hace uso de jQuery

Página oficial

Aquí puedes visitar la página web de Slider Pro.

Repositorio GitHub

Slider Pro

Código HTML y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Slider Pro</title>
	<!--Slider Pro-->
	<link rel="stylesheet" href="css/slider-pro.min.css">
</head>
<body>
	<div class="slider-pro" id="slider_pro">
    <div class="sp-slides">
    	<div class="sp-slide">
		    <img src="images/sliders/slider.jpg" alt="Lorem ipsum.">
		  </div>
		  <div class="sp-slide">
	    	<img src="images/sliders/slider2.jpg" alt="Lorem ipsum dolor sit amet, consectetur.">
	    </div>
	    <div class="sp-slide">
	    	<img src="images/sliders/slider3.jpg" alt="Lorem ipsum dolor sit amet, consectetur.">
	    </div>
	    <div class="sp-slide">
	    	<img src="images/sliders/slider4.jpg" alt="Lorem ipsum dolor sit amet, consectetur.">
	    </div>
	    <div class="sp-slide">
	    	<img src="images/sliders/slider5.jpg" alt="Lorem ipsum dolor sit amet, consectetur.">
	    </div>
    </div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="js/jquery.sliderPro.min.js"></script>
	<script>
		$( document ).ready(function() {
		  //Slider Pro
	    $( '#slider_pro' ).sliderPro({
	      fullScreen: true,
	      arrows: true,
	      buttons: false,
	      waitForLayers: true,
	      thumbnailWidth: 200,
	      thumbnailHeight: 100,
	      thumbnailPointer: true,
	      autoplay: true,
	      autoScaleLayers: false,
	      breakpoints: {
	        1000:{
	          height: 450
	        },
	        800:{
	          height: 500
	        },
	        500: {
	          height: 600
	        }
	      }
	    });
	});
	</script>
</body>
</html>

LEAST.js

Esta fantástica librería JavaScript sirve para implementar galería de imágenes de una manera sencilla.

Funciona conjuntamente con jQuery

Página oficial

Si deseas obtener más información puedes visitar su página web LEAST.js

Repositorio GitHub

LEAST.js

Código HTML y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Least.js</title>
  <!-- Responsive viewport para dispositivos móviles -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!--Least-->
	<link rel="stylesheet" href="css/least.min.css">
</head>
<body>
	 <!-- Least Gallery -->
    <section id="least">
        <!-- Contenedor para cargar la imagen Fullscreen -->
        <div class="least-preview"></div>
        <!-- Least.js Galería de imágenes -->
        <ul class="least-gallery">
            <li>
                <a href="images/least.js/big/01.jpg" title="Skateboard" data-subtitle="View Picture" data-caption="<strong>Bold text</strong> normal caption text">
                    <img src="images/least.js/thumbnails/01.jpg" alt="Alt Image Text" />
                </a>
            </li>
            <li>
                <a href="images/least.js/big/02.jpg" title="Train Rails" data-subtitle="View Picture" data-caption="Now it's possibe to add an URL-Link into caption text - <a href='http://www.google.com' target='_blank'>GOOGLE</a>">
                    <img src="images/least.js/thumbnails/02.jpg" alt="Alt Image Text" />
                </a>
            </li>
            <li>
                <a href="images/least.js/big/03.jpg" title="Apple" data-subtitle="View Picture">
                    <img src="images/least.js/thumbnails/03.jpg" alt="Alt Image Text" />
                </a>
            </li>
            <li>
                <a href="images/least.js/big/04.jpg" title="Road Trip" data-subtitle="View Picture">
                    <img src="images/least.js/thumbnails/04.jpg" alt="Alt Image Text" />
                </a>
            </li>
            <li>
                <a href="images/least.js/big/05.jpg" title="Desert" data-subtitle="View Picture">
                    <img src="images/least.js/thumbnails/05.jpg" alt="Alt Image Text" />
                </a>
            </li>
            <li>
                <a href="images/least.js/big/06.jpg" title="Tree" data-subtitle="View Picture">
                    <img src="images/least.js/thumbnails/06.jpg" alt="Alt Image Text" />
                </a>
            </li>
            <li>
                <a href="images/least.js/big/07.jpg" title="MacBook" data-subtitle="View Picture">
                    <img src="images/least.js/thumbnails/07.jpg" alt="Alt Image Text" />
                </a>
            </li>
            <li>
                <a href="images/least.js/big/08.jpg" title="Clock" data-subtitle="View Picture">
                    <img src="images/least.js/thumbnails/08.jpg" alt="Alt Image Text" />
                </a>
            </li>
            <li>
                <a href="images/least.js/big/09.jpg" title="iPhone" data-subtitle="View Picture">
                    <img src="images/least.js/thumbnails/09.jpg" alt="Alt Image Text" />
                </a>
            </li>
            <li>
                <a href="images/least.js/big/10.jpg" title="New York" data-subtitle="View Picture">
                    <img src="images/least.js/thumbnails/10.jpg" alt="Alt Image Text" />
                </a>
            </li>
        </ul>
    </section>
	
  <script src="https://code.jquery.com/jquery-2.0.2.min.js" integrity="sha256-TZWGoHXwgqBP1AF4SZxHIBKzUdtMGk0hCQegiR99itk=" crossorigin="anonymous"></script>
	<script src="js/least.min.js"></script>
	<script>
		$( document ).ready(function() {
		  //Least
	    $('.least-gallery').least();
	});
	</script>
</body>
</html>

Descarga

Descargar demos

Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más