Como criar interfaces deslizantes em seu aplicativo React com o Swiper

À medida que os dispositivos móveis se tornam mais populares, as interfaces deslizantes se tornaram uma forma padrão de interagir com os aplicativos. As interfaces deslizantes são essenciais para fornecer a melhor experiência de usuário para usuários móveis.

Swiper é uma biblioteca versátil que permite criar interfaces deslizantes em seus aplicativos React. Descubra como você pode criar interfaces deslizantes em seu aplicativo React usando o Swiper.

Instalando o Swiper

Swiper é uma das muitas bibliotecas que você pode usar para personalizar seu aplicativo React. Para começar a usar o Swiper, você precisa instalá-lo em seu aplicativo React. Você pode fazer isso com o seguinte comando de terminal que deve ser executado no diretório raiz do seu projeto:

npm install swiper

Depois de instalar o Swiper, você pode usá-lo em seu aplicativo.

Criando interfaces deslizantes

Depois de instalar o Swiper em seu aplicativo React, você pode criar interfaces deslizantes. Comece importando o

O componente Swiper é o componente central da biblioteca Swiper. Ele define a estrutura, o comportamento e a funcionalidade dos elementos deslizantes. O componente SwiperSlide é um componente filho do componente Swiper. Ele define slides individuais que estão dentro do componente Swiper.

Aqui está um exemplo de uma interface deslizante usando os componentes Swiper e SwiperSlide:

importar Reagir de'reagir';
importar {Swiper, SwiperSlide} de"deslizar/reagir";
importar'swiper/css';
funçãoAplicativo() {
retornar (




<divnome da classe='elemento'>Elemento 1div></SwiperSlide>
<divnome da classe='elemento'>Elemento 2div></SwiperSlide>
<divnome da classe='elemento'>Elemento 3div></SwiperSlide>
<divnome da classe='elemento'>elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
exportarpadrão Aplicativo

Em adição a Swiper e SwiperSlide componentes, este bloco de código importa a folha de estilo padrão para Swiper usando o swiper/css módulo.

O exemplo envolve um componente Swiper em torno de quatro componentes filho SwiperSlide. Cada SwiperSlide contém um div elemento com o nome da classe atributo. Você pode usar o className para estilizar os elementos div:

.elemento {
tamanho em linha: 100px;
raio da borda: 12px;
preenchimento: 1rem;
cor: #333333;
cor de fundo: #e2e2e2;
família de fontes: cursiva;
}

Personalizando sua interface deslizante

Depois de criar com sucesso uma interface deslizante, você pode aprimorar sua aparência e funcionalidade para atender às suas necessidades.

Com o Swiper, você pode personalizar o comportamento e a aparência da interface usando várias opções. Você passa essas opções para o Swiper componente como adereços em React:

importar Reagir de'reagir';
importar {Swiper, SwiperSlide} de"deslizar/reagir";
importar'swiper/css';
funçãoAplicativo() {
retornar (



 espaçoEntre={30}
 slidesPerView={2}
 laço={ verdadeiro }
 >
<divnome da classe='elemento'>Elemento 1div></SwiperSlide>
<divnome da classe='elemento'>Elemento 2div></SwiperSlide>
<divnome da classe='elemento'>Elemento 3div></SwiperSlide>
<divnome da classe='elemento'>elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
exportarpadrão Aplicativo

Neste exemplo, o componente Swiper usa três suportes: espaço entre, slidesPerView, e laço. O espaço entre prop define o espaço entre cada slide, neste caso 30 pixels.

Usando o slidesPerView prop, você pode definir o número de slides visíveis de uma só vez. Neste caso, o slidesPerView prop é definido como 2, causando o Swiper componente para exibir dois slides simultaneamente.

Por último, o laço prop especifica se os slides devem repetir infinitamente ou não. Neste exemplo, os slides serão repetidos infinitamente porque o laço valor prop é verdadeiro.

Configurando suas interfaces deslizantes com módulos

Você pode configurar ainda mais o comportamento de sua interface deslizante com Módulos JavaScript fornecido pela biblioteca Swiper. Alguns dos módulos que fornece são Navegação, Reprodução automática, Paginação, e Barra de rolagem.

Para usar qualquer um desses módulos em seu aplicativo, você deve importá-los da biblioteca Swiper. Você também deve importar os estilos CSS correspondentes para os módulos e passar seus nomes para o Swiper componente usando o módulos suporte.

Por exemplo, é assim que você pode usar o Navegação módulo para configurar suas interfaces deslizantes:

importar Reagir de"reagir";
importar { Swiper, SwiperSlide } de"deslizar/reagir";
importar { Navegação } de"escapador";
importar"swiper/css";
importar"swiper/css/navegação";
funçãoAplicativo() {
retornar (



 espaçoEntre={30}
 slidesPerView={2}
 módulos={[Navegação]}
 laço={verdadeiro}
 navegação={verdadeiro}
 >
<divnome da classe="elemento">Elemento 1div></SwiperSlide>
<divnome da classe="elemento">Elemento 2div></SwiperSlide>
<divnome da classe="elemento">Elemento 3div></SwiperSlide>
<divnome da classe="elemento">elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
exportarpadrão Aplicativo;

Este bloco de código importa o Navegação módulo e seu estilo CSS, então especifica o módulo no módulos adereço do Swiper componente. O módulos prop ativa e configura os módulos fornecidos pela biblioteca Swiper.

O módulo Navigation fornece funcionalidade de navegação para o componente Swiper. Ele adiciona botões de seta anteriores e posteriores nos quais você pode clicar ou tocar para mover para o slide anterior ou seguinte.

O navegação prop é verdadeiro, o que fará com que os botões anterior e seguinte sejam exibidos na tela.

Configurando interfaces deslizantes com reprodução automática

O Reprodução automática O módulo permite que o controle deslizante faça a transição entre slides automaticamente sem interação do usuário.

Aqui está um exemplo de como configurar sua interface deslizante usando o Reprodução automática módulo:

importar Reagir de"reagir";
importar { Swiper, SwiperSlide } de"deslizar/reagir";
importar { Reprodução automática } de"escapador";
importar"swiper/css";
importar"swiper/css/autoplay";
funçãoAplicativo() {
retornar (



 espaçoEntre={30}
 slidesPerView={2}
 módulos={[Reprodução automática]}
 laço={verdadeiro}
 reprodução automática={{ atraso: 3000 }}
 >
<divnome da classe="elemento">Elemento 1div></SwiperSlide>
<divnome da classe="elemento">Elemento 2div></SwiperSlide>
<divnome da classe="elemento">Elemento 3div></SwiperSlide>
<divnome da classe="elemento">elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
exportarpadrão Aplicativo;

Usando o Reprodução automática prop, você pode especificar o atraso; neste caso, é definido como 3000 milissegundos.

Configurando interfaces deslizantes com paginação

Outro módulo Swiper importante é Paginação. O Paginação O módulo permite adicionar marcadores de paginação ou indicadores de barra de progresso ao controle deslizante, dando aos usuários uma representação visual do número de slides e sua posição atual no controle deslizante.

Para usar o Paginação módulo, você precisa importá-lo e incluí-lo no módulos adereço do Swiper componente:

importar Reagir de"reagir";
importar { Swiper, SwiperSlide } de"deslizar/reagir";
importar { Paginação } de"escapador";
importar"swiper/css";
importar"swiper/css/paginação";
funçãoAplicativo() {
retornar (



 espaçoEntre={30}
 slidesPerView={2}
 módulos={[Paginação]}
 laço={verdadeiro}
 paginação={{ clicável: verdadeiro }}
 >
<divnome da classe="elemento">Elemento 1div></SwiperSlide>
<divnome da classe="elemento">Elemento 2div></SwiperSlide>
<divnome da classe="elemento">Elemento 3div></SwiperSlide>
<divnome da classe="elemento">elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
exportarpadrão Aplicativo;

Este bloco de código fornece a funcionalidade de paginação com o Paginação módulo. Ele também permite que os usuários cliquem no paginação balas, definindo o clicável propriedade do paginação suporte para verdadeiro.

Além da biblioteca Swiper paginação módulo, reagir-paginar é outra excelente opção para criar paginação em seu aplicativo React.

Construindo Aplicações Acessíveis com React

As interfaces deslizantes melhoram a experiência do usuário de seu aplicativo para usuários de tela sensível ao toque. O Swiper oferece muita flexibilidade e você pode personalizá-lo facilmente de acordo com as necessidades do seu aplicativo.

Várias bibliotecas de interface do usuário podem ajudar a tornar seus aplicativos React mais acessíveis. Essas bibliotecas fornecem recursos e funcionalidades que aprimoram a experiência do usuário em seu aplicativo.