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.