Merida Design Blog

Publicado el | Recursos / ,

Swiper: Moderno slider touch para apps y sitios móviles

Swiper es uno de los sliders más modernos con touch para móviles, transiciones y animaciones aceleradas por hardware para un desempeño más nativo. El objetivo es que sea empleado en sitios web móviles y aplicaciones móviles híbridas. Esta diseñado mayormente para iOS pero funciona bien en las últimas versiones de Android, Windows Phone 8+ y navegadores modernos.

Swiper no es compatible con todas las plataformas, está enfocado en plataformas para aplicaciones modernas (ios, android) para ofrecer la mejor experiencia de uso.


Características principales

  • Libre de dependencias a otras librerías
    No require del uso de ninguna otra librería como jQuery, lo que lo hace mas ligero y rápido.

  • Respuesta inmediata a gestos touch
    Esto le brinda una mejor experiencia en dispositivos móviles.

  • Efectos de transiciones
    Cuenta con 3 efectos adicionales a los comunes: Slide, Fade, Cubo 3D, y Cubierta 3D.

  • Flexbox layout
    Brinda mayor flexibilidad para diseñar el layout del slider usando únicamente css.

  • Transiciones Parallax
    Soporta transiciones parallax en cualquier elemento dentro del slider: imágenes, textos, fondos, etc.


Uso básico

1a. Descarga e instala Swiper

$ bower install swiper

1b. Usa Swiper desde un CDN.

CDN: https://cdnjs.com/libraries/Swiper

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>

2. Incluye los archivos de **Swiper en tu aplicación o web móvil.**

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html> 

3. Agrega Swiper al HTML

<!-- Slider -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- Si necesitas paginación -->
    <div class="swiper-pagination"></div>
    
    <!-- Si necesitas botones de navegación -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- Si necesitas Scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

4. Estilos

.swiper-container {
    width: 600px;
    height: 300px;
} 

5. Inicializa Swiper
La mejor forma es colocando una etiqueta script justo antes del cierre del con el siguiente código:

  var mySwiper = new Swiper ('.swiper-container', {
    // Parámetros opcionales
    direction: 'vertical',
    loop: true,
    
    // Si necesitas paginación
    pagination: '.swiper-pagination',
    
    // Navegación
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // Si necesitas scrollbar
    scrollbar: '.swiper-scrollbar',
  })        

Más información de uso en su página Getting Started With Swiper.
Página: http://www.idangero.us/swiper



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: