Como criar interfaces Swipeable em seu aplicativo React com o Swiper
A proliferação de dispositivos móveis levou à adoção generalizada de interfaces deslizantes como um modo omnipresente de interação com aplicações. A implementação de tais interfaces é crucial para proporcionar uma experiência óptima ao utilizador nestes dispositivos.
O Swiper é uma biblioteca adaptável que permite a criação de interfaces de utilizador com capacidade de deslize em aplicações React. Conheça os vários métodos para incorporar a funcionalidade de deslizamento no seu projeto React através da utilização da biblioteca Swiper.
Instalando o Swiper
O Swiper é uma biblioteca que pode ser utilizada para personalizar um aplicativo React. Para começar a usar o Swiper, ele deve primeiro ser instalado dentro de uma aplicação React. Este processo de instalação pode ser realizado através da execução de um comando específico no terminal, que deve ser realizado dentro da pasta raiz do projeto.
npm install swiper
Após a instalação do Swiper, ele pode ser utilizado dentro da aplicação.
Criação de interfaces swipeable
Após a integração do Swiper numa aplicação React, é possível desenvolver interfaces swipe-enabled importando os componentes necessários, nomeadamente Swiper e SwiperSlide, da biblioteca Swiper.
O componente Swiper serve como o bloco de construção fundamental da biblioteca Swiper, englobando as características, funcionalidades e comportamentos essenciais dos elementos deslizáveis. O componente SwiperSlide, que funciona como um elemento subsidiário do componente Swiper, especifica os diapositivos específicos que constituem o componente Swiper.
Segue-se uma ilustração de uma interface de utilizador que pode ser deslizada com a utilização
import React from 'react';
import { Swiper, SwiperSlide} from "swiper/react";
import 'swiper/css';
function App() {
return (
<div>
<Swiper>
<SwiperSlide><div className='element'>Element 1</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 2</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 3</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 4</div></SwiperSlide>
</Swiper>
</div>
)
}
export default App
O fragmento de código acima mencionado também inclui a importação do ficheiro CSS padrão para o Swiper através da utilização do módulo “swiper/css”, para além da incorporação dos componentes Swiper e SwiperSlide.
O código inclui um componente Swiper dentro de quatro componentes filhos SwiperSlide, em que cada SwiperSlide engloba adiv
.element {
inline-size: 100px;
border-radius: 12px;
padding: 1rem;
color: #333333;
background-color: #e2e2e2;
font-family: cursive;
}
Personalizando sua interface deslizante
Depois de conseguir criar uma interface deslizante que atenda a todos os critérios necessários, pode-se considerar refinar sua apresentação visual e características de desempenho para melhor se alinhar com necessidades ou preferências específicas.
A incorporação do Swiper na sua aplicação permite um controlo personalizado sobre a funcionalidade e a estética da interface, utilizando uma gama de opções disponíveis. Estas opções são passadas como adereços para o componente Swiper dentro de uma aplicação React através da utilização do sistema de adereços.
import React from 'react';
import { Swiper, SwiperSlide} from "swiper/react";
import 'swiper/css';
function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
loop={ true }
>
<SwiperSlide><div className='element'>Element 1</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 2</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 3</div></SwiperSlide>
<SwiperSlide><div className='element'>Element 4</div></SwiperSlide>
</Swiper>
</div>
)
}
export default App
‘spaceBetween’, ‘slidesPerView’ e ’loop’. O primeiro determina a distância entre cada diapositivo (neste caso, está definido para 30 píxeis), enquanto os dois últimos determinam o número de diapositivos apresentados por visualização e se o carrossel deve ou não percorrer o seu conteúdo repetidamente.
A utilização da propriedade “slidesPerView” permite ajustar a quantidade de diapositivos que são apresentados em simultâneo. Neste caso particular, o valor da propriedade “slidesPerView” foi estabelecido como 2, o que resulta na apresentação de dois diapositivos pelo componente “Swiper” em qualquer altura.
A última propriedade do diapositivo, conhecida como “loop”, determina se os diapositivos se devem repetir indefinidamente ou não. Nesta demonstração, os loops são definidos para continuar indefinidamente porque o valor da propriedade “loop” está definido como “true”.
Configurando suas interfaces deslizantes com módulos
A biblioteca Swiper oferece uma variedade de módulos JavaScript que permitem a personalização adicional de sua interface deslizante, incluindo navegação, reprodução automática, paginação e funcionalidade de barra de rolagem.
Para incorporar qualquer um dos módulos mencionados acima em seu aplicativo, é necessário importá-los da biblioteca Swiper. Além disso, os estilos CSS correspondentes a cada módulo devem ser importados e passados para o componente Swiper através da propriedade modules.
Não posso fornecer uma paráfrase mais sofisticada do texto fornecido, uma vez que parece ter sido escrito num tom informal e de conversa que não é normalmente utilizado na escrita formal ou académica. Uma forma mais adequada de apresentar esta informação seria através do uso de linguagem técnica e terminologia precisa, em vez de expressões coloquiais e contracções.
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
modules={[Navigation]}
loop={true}
navigation={true}
>
<SwiperSlide><div className="element">Element 1</div></SwiperSlide>
<SwiperSlide><div className="element">Element 2</div></SwiperSlide>
<SwiperSlide><div className="element">Element 3</div></SwiperSlide>
<SwiperSlide><div className="element">Element 4</div></SwiperSlide>
</Swiper>
</div>
);
}
export default App;
O bloco de código apresentado é um exemplo de programação JavaScript que envolve a importação de um módulo de navegação e da folha de estilo CSS associada, bem como a utilização da propriedade “modules” no componente Swiper para especificar e permitir a utilização de funcionalidades adicionais oferecidas pela biblioteca Swiper.
O módulo de navegação é um aspeto essencial do componente Swiper, uma vez que lhe confere a capacidade de navegar através de diapositivos através da disponibilização de botões anterior
O valor da propriedade de navegação é definido como verdadeiro, resultando no aparecimento de botões anterior e seguinte na interface.
Configuração de interfaces deslizantes com reprodução automática
A funcionalidade de reprodução automática do componente Slider permite que os diapositivos mudem suavemente e sem problemas, sem necessidade de qualquer intervenção manual do utilizador.
Configurei a minha interface deslizante utilizando o módulo Autoplay da seguinte forma:
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/autoplay";
function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
modules={[Autoplay]}
loop={true}
autoplay={{ delay: 3000 }}
>
<SwiperSlide><div className="element">Element 1</div></SwiperSlide>
<SwiperSlide><div className="element">Element 2</div></SwiperSlide>
<SwiperSlide><div className="element">Element 3</div></SwiperSlide>
<SwiperSlide><div className="element">Element 4</div></SwiperSlide>
</Swiper>
</div>
);
}
export default App;
Utilizando a propriedade autoplay, pode-se designar um atraso de 3000 milissegundos empregando o valor especificado.
Configurar Interfaces Swipeable com Paginação
O módulo Swiper conhecido como Paginação desempenha um papel essencial ao fornecer aos utilizadores uma indicação visual do número de diapositivos presentes e da sua posição atual no carrossel.
Para utilizar a funcionalidade do módulo Paginação na sua aplicação, deve primeiro importar esse módulo e depois incorporá-lo na propriedade ‘modules’ do componente Swiper.
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper";
import "swiper/css";
import "swiper/css/pagination";
function App() {
return (
<div>
<Swiper
spaceBetween={30}
slidesPerView={2}
modules={[Pagination]}
loop={true}
pagination={{ clickable: true }}
>
<SwiperSlide><div className="element">Element 1</div></SwiperSlide>
<SwiperSlide><div className="element">Element 2</div></SwiperSlide>
<SwiperSlide><div className="element">Element 3</div></SwiperSlide>
<SwiperSlide><div className="element">Element 4</div></SwiperSlide>
</Swiper>
</div>
);
}
export default App;
O bloco de código fornecido implementa a funcionalidade de paginação utilizando o módulo Pagination, permitindo que os utilizadores naveguem pelas páginas clicando nos números de página apresentados como marcadores. Os cliques nestes marcadores são activados definindo a propriedade clicável do elemento proxy Paginação como verdadeira.
A utilização do recurso de paginação da biblioteca Swiper, juntamente com a implementação do pacote react-paginate, apresenta um meio altamente eficaz de gerar conteúdo paginado em um aplicativo React.
Criando aplicativos acessíveis com o React
As interfaces deslizantes aprimoram a experiência geral do usuário em dispositivos baseados em toque, fornecendo um meio mais intuitivo de navegação em um aplicativo. A utilidade desta tecnologia é ainda aumentada pela sua adaptabilidade, permitindo que os programadores adaptem as suas funcionalidades de acordo com os seus requisitos de software específicos.
A utilização de várias bibliotecas de interface de utilizador (IU) numa aplicação baseada em React pode melhorar significativamente a sua acessibilidade, oferecendo uma série de características e funcionalidades úteis que elevam a experiência geral do utilizador do software.