Framework7 - Control deslizante Swiper

Descripción

El deslizador deslizante es el deslizador táctil más potente y moderno y viene en Framework7 con muchas características.

El siguiente diseño HTML muestra el deslizador deslizante:

<!-- Container class for slider -->
<div class = "swiper-container">
   <!-- Wrapper class for slider -->
   <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>
      ... other slides ...
   </div>
   
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></div>
</div>

Las siguientes clases se utilizan para el deslizador deslizante:

  • swiper-container - Es un elemento obligatorio para el contenedor deslizante principal y se utiliza para diapositivas y paginaciones.

  • Swiper-wrapper - Es un elemento obligatorio para portaobjetos de envoltura adicionales.

  • swiper-slide - Es un solo elemento de diapositiva y podría contener cualquier HTML en su interior.

  • swiper-pagination - Es opcional para viñetas de paginación y se crean automáticamente.

Puede inicializar el swiper con JavaScript utilizando sus métodos relacionados:

myApp.swiper(swiperContainer,parameters)

O

new Swiper(swiperContainer, parameters)

Ambos métodos se utilizan para inicializar el control deslizante con opciones.

Los métodos dados anteriormente contienen los siguientes parámetros:

  • swiperContainer- Es HTMLElement o cadena de un contenedor swiper y es obligatorio.

  • parameters - Estos son elementos opcionales que contienen objetos con parámetros de deslizamiento.

Por ejemplo

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

Es posible acceder a una instancia de swiper y la propiedad swiper del contenedor del control deslizante tiene el siguiente elemento HTML:

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

Puede ver las diferentes formas y tipos de swiper en la siguiente tabla:

S. No Tipos y descripción de Swiper
1 Swiper predeterminado con paginación

Es un control deslizante táctil moderno y el deslizador se desliza horizontalmente, de forma predeterminada.

2 Swiper vertical

Este también funciona como un deslizador predeterminado, pero se desliza verticalmente.

3 Con espacio entre diapositivas

Este deslizador se utiliza para dejar espacio entre dos toboganes.

4 Múltiples Swipers

Este deslizador usa más de un deslizador en una sola página.

5 Swipers anidados

Es la combinación de deslizamientos verticales y horizontales.

6 Controles personalizados

Se utiliza para controles personalizados para elegir o deslizar cualquier diapositiva.

7 Carga lenta

Se puede utilizar para archivos multimedia, que tardan en cargarse.