[Javascript ] Instalando y Probando el plugin Swiper JS

El plugin Swiper JS es un plugin Javascript para hacer Slides o Carouseles de manera didácticas, responsiva y Touch.

El plugin Swiper JS destaca por ser ligero y muy personalizable, util para todo tipo de proyectos.

Instalación

Para instalar el plugin Swiper JS vamos a usar el comando NPM (Node Package Manager) siguiente:

npm install swiper

Este comando va a descargar la librería Swiper JS en una carpeta node_modules/swiper aquí puede estar en nuestra carpeta de proyecto o despues podemos moverla a la carpeta de nuestro proyecto.

El siguiente paso sera crear un archivo .html y en la cabecera HEAD del archivo HTML poner las librerías css y javascript necesarias.

	<!-- Archivo CSS para Swiper JS -->
	<link rel="stylesheet" type="text/css" href="node_modules/swiper/swiper-bundle.css">
	<!-- Archivo Javascript para Swiper JS -->
	<script type="text/javascript" src="node_modules/swiper/swiper-bundle.js"></script>

En el BODY del archivo HTML vamos a agregar el código para que se cree nuestro slider.

<!-- Contenerdor Principal de Swiper -->
<div class="swiper">
  <!-- Agregamos un sub contenedor adicional-->
  <div class="swiper-wrapper">
    <!-- Aqui van los slides -->
    <div class="swiper-slide"><img src="images/image1.png"></div>
    <div class="swiper-slide"><img src="images/image2.png"></div>
    <div class="swiper-slide"><img src="images/image3.png"></div>
    ...
  </div>
  <!-- Si necesitamos el Contenedor de la paginacion -->
  <div class="swiper-pagination"></div>

  <!-- Botones de naveacion -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Si necesitamos el scrollcar -->
  <div class="swiper-scrollbar"></div>
</div>

El el apartado del Slide podemos agregar text, imagenes, video ,etc.

Por ultimo , pero no menos importante, vamos a crear un script para inicializar el plugin Swiper.

    <!-- Inicializar el plugin -->
    <script>
      var swiper = new Swiper(".swiper", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>

Y Listo ahora solo nos queda probar el resultado, el cual debe funcionar perfectamente.

Descargar

A continuación puedes descargar el ejemplo desde Dropbox.

Link: https://www.dropbox.com/s/xvz421rv72jaj4k/swiper1.zip

Cualquier duda por favor deja nos tu comentario.