Framework7 - Deslizador deslizante

Descrição

O controle deslizante é o controle deslizante de toque mais poderoso e moderno e vem para o Framework7 com muitos recursos.

O seguinte layout HTML mostra o controle 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>

As seguintes classes são usadas para o controle deslizante -

• swiper-container - É um elemento obrigatório para o contêiner do controle deslizante principal e é usado para slides e paginações.

• Swiper-wrapper - É um elemento necessário para slides de invólucro adicionais.

• swiper-slide - É um único elemento de slide e pode conter qualquer HTML dentro.

• swiper-pagination - É opcional para marcadores de paginação e são criados automaticamente.

Você pode inicializar o swiper com JavaScript usando seus métodos relacionados -

myApp.swiper(swiperContainer,parameters)

OU

new Swiper(swiperContainer, parameters)

Ambos os métodos são usados ​​para inicializar o controle deslizante com opções.

Os métodos fornecidos acima contêm os seguintes parâmetros -

• swiperContainer- É HTMLElement ou string de um container swiper e é obrigatório.

• parameters - São elementos opcionais que contêm objetos com parâmetros de swiper.

Por exemplo -

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

É possível acessar uma instância de swiper e a propriedade swiper do contêiner do slider tem o seguinte elemento HTML -

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

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

Você pode ver as diferentes formas e tipos de swiper na tabela a seguir -

S.No	Tipos e descrição de swiper
1	Swiper padrão com paginação É um controle deslizante de toque moderno e desliza horizontalmente, por padrão.
2	Swiper vertical Este também funciona como um deslizante padrão, mas desliza verticalmente.
3	Com espaço entre slides Este swiper é usado para dar espaço entre dois slides.
4	Swipers múltiplos Este swiper usa mais de um swiper em uma única página.
5	Swipers aninhados É a combinação de slides verticais e horizontais.
6	Controles personalizados Ele é usado para controles personalizados para escolher ou deslizar qualquer slide.
7	Carregamento lento Ele pode ser usado para arquivo multimídia, que leva tempo para carregar.