Como construir um controle deslizante responsivo com Swiper.js

Nosso projeto de controle deslizante

Confira o que iremos construir:

Certifique-se de abrir a demonstração em uma tela grande e redimensionar sua janela para ver como o layout da página muda.

O que é o controle deslizante Swiper?

Swiper é um plugin JavaScript gratuito criado por Vladimir Kharlampidi que permite criar controles deslizantes modernos e responsivos.

Com quase 30 mil estrelas no GitHub no momento em que este artigo foi escrito, é considerado um dos plug-ins JavaScript mais dominantes que existem. Para entender melhor suas capacidades, confira as demonstrações disponíveis.

O Swiper não está disponível apenas para uso com JavaScript puro. Se você planeja construir um aplicativo com uma das estruturas JavaScript populares (por exemplo, React) e precisa de um controle deslizante, considere examinar o componente Swiper integrado associado.

Primeiros passos com o Swiper

Para começar a usar o Swiper, comece baixando e instalando os seguintes arquivos em seu projeto:

• swiper-bundle.css ou sua versão reduzida
• swiper-bundle.js ou sua versão reduzida

Você pode obter uma cópia desses arquivos do Swiper visitando o Repositório GitHubusando um gerenciador de pacotes (por exemplo npm), ou carregando os ativos necessários através de um CDN (por exemplo, cdnjs). Para este tutorial, escolherei a última opção.

Para este tutorial, além dos arquivos do Swiper, também incorporei o arquivo CSS do Bootstrap 5.

Com isso em mente, se você olhar sob o Configurações da nossa caneta de demonstração, você verá que existem dois arquivos CSS externos e um arquivo JavaScript externo.

1. Identifique o Layout

Para começar, vamos primeiro identificar o escopo do projeto.

A demonstração de hoje é uma página web dedicada à Tanzânia, um país de imensa beleza. Para configurar a página, pegaremos algum conteúdo da Wikipedia e imagens do Unsplash.

Vamos determinar como o layout da página aparecerá nas diversas telas.

O layout móvel

Em telas pequenas (<768px), sua aparência ficará assim:

Observe que cada controle deslizante mostra o primeiro slide e metade do segundo.

O layout do tablet

A seguir, em telas médias (≥768px), sua aparência mudará da seguinte forma:

Observe que o primeiro controle deslizante mostra os dois primeiros slides e metade do terceiro, enquanto o segundo controle deslizante ainda mostra dois slides.

O layout da área de trabalho

Finalmente, em telas grandes (≥1200px), terá esta aparência:

Novamente, considere que o primeiro controle deslizante mostra os três primeiros slides e metade do quarto, enquanto o segundo controle deslizante mostra os dois primeiros slides e metade do terceiro.

Além disso, preste atenção em outra coisa: o lado direito do primeiro controle deslizante está alinhado à largura do contêiner que, como veremos, será de 1100px. Da mesma forma, o slide esquerdo do segundo controle deslizante é alinhado à largura do contêiner.

2. Defina a marcação HTML

A marcação de nossa página consistirá em quatro seções:

• A primeira e a terceira seções conterão informações sobre a Tanzânia retiradas da Wikipedia.
• A segunda e a quarta seções incluirão dois carrosséis iguais que exibirão a Tanzânia por meio de fotos do Unsplash. Essas seções terão apenas uma classe diferente que determinará seu layout. Dito isto, a segunda seção terá o section-with-right-offset classe, enquanto a quarta seção a section-with-left-offset um.

Esta é a estrutura da página:

1

 class="mt-5">

2

   class="container">...

3

4

5

 class="section-with-carousel section-with-right-offset position-relative mt-5">

6

   class="container">

7

     class="mb-3">...

8

9

   class="carousel-wrapper">

10

     class="swiper">

11

       class="swiper-wrapper">

12

         class="swiper-slide">

13

14

             width="640" height="480" src="tanzania1.jpg" alt="">

15

16

               xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">

17

                 d="M12 13.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z">

18

                 fill-rule="evenodd" d="M19.071 3.429C15.166-.476 8.834-.476 4.93 3.429c-3.905 3.905-3.905 10.237 0 14.142l.028.028 5.375 5.375a2.359 2.359 0 003.336 0l5.403-5.403c3.905-3.905 3.905-10.237 0-14.142zM5.99 4.489A8.5 8.5 0 0118.01 16.51l-5.403 5.404a.859.859 0 01-1.214 0l-5.378-5.378-.002-.002-.023-.024a8.5 8.5 0 010-12.02z">

19

20

              Nungwi, Zanzibar, Tanzania

21

22

23

24

25

26

27

28

   class="carousel-controls">

29

     class="carousel-control carousel-control-left" type="button">

30

       xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40">

31

         fill-rule="evenodd" d="M10.78 19.03a.75.75 0 01-1.06 0l-6.25-6.25a.75.75 0 010-1.06l6.25-6.25a.75.75 0 111.06 1.06L5.81 11.5h14.44a.75.75 0 010 1.5H5.81l4.97 4.97a.75.75 0 010 1.06z">

32

33

34

     class="carousel-control carousel-control-right" type="button">

35

       xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40">

36

         fill-rule="evenodd" d="M13.22 19.03a.75.75 0 001.06 0l6.25-6.25a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 10-1.06 1.06l4.97 4.97H3.75a.75.75 0 000 1.5h14.44l-4.97 4.97a.75.75 0 000 1.06z">

37

38

39

40

   class="swiper-pagination">

41

42

43

 class="mt-5">

44

   class="container">...

45

46

47

 class="section-with-carousel section-with-left-offset position-relative mt-5">

48

49

3. Especifique os estilos principais

Vamos agora nos concentrar nos estilos mais importantes da nossa página.

Aqui estão as coisas notáveis:

• O contêiner terá largura máxima de 1100px.
• As dimensões iniciais das imagens Unsplash não serão iguais. Pensando nisso, as imagens do carrossel terão uma altura fixa que varia de acordo com o tamanho da tela. Aqui usaremos o object-fit: cover valor da propriedade para ajustar as imagens dentro do contêiner. Alternativamente, poderíamos ter adicionado as imagens como plano de fundo.
• Por padrão, todas as legendas das imagens ficarão ocultas, exceto a legenda do slide ativo. À medida que o slide ativo muda, a legenda associada aparecerá com uma pequena animação de slide.

Aqui estão os estilos associados:

1

.container {

2

  max-width: 1100px;

3

}

4

5

.section-with-carousel .swiper-slide figure {

6

  position: relative;

7

  overflow: hidden;

8

}

9

10

.section-with-carousel .swiper-slide img {

11

  width: 100%;

12

  height: 320px;

13

  object-fit: cover;

14

}

15

16

.section-with-carousel .swiper-slide figcaption {

17

  position: absolute;

18

  bottom: 0;

19

  left: 0;

20

  right: 0;

21

  transform: translateY(20%);

22

  display: flex;

23

  align-items: baseline;

24

  justify-content: center;

25

  padding: 20px;

26

  text-align: center;

27

  opacity: 0;

28

  visibility: hidden;

29

  color: white;

30

  background: rgba(0, 0, 0, 0.5);

31

  transition: all 0.4s;

32

}

33

34

.section-with-carousel .swiper-slide figcaption svg {

35

  flex-shrink: 0;

36

  fill: white;

37

  margin-right: 10px;

38

}

39

40

.section-with-carousel .swiper-slide-active figcaption {

41

  opacity: 1;

42

  visibility: visible;

43

  transform: none;

44

}

45

46

.section-with-carousel .carousel-controls {

47

  position: absolute;

48

  top: 50%;

49

  left: 0;

50

  right: 0;

51

  transform: translateY(-50%);

52

  display: flex;

53

  justify-content: space-between;

54

  padding: 0 12px;

55

  z-index: 1;

56

}

57

58

.section-with-carousel .carousel-controls .carousel-control {

59

  opacity: 0.25;

60

  transition: opacity 0.3s;

61

}

62

63

.section-with-carousel .carousel-controls .carousel-control:hover {

64

  opacity: 1;

65

}

66

67

@media (min-width: 768px) {

68

  .section-with-carousel .swiper-slide img {

69

    height: 370px;

70

  }

71

}

72

73

@media (min-width: 1200px) {

74

  .section-with-carousel .swiper-slide img {

75

    height: 420px;

76

  }

77

78

  .section-with-carousel .carousel-controls {

79

    padding: 0 50px;

80

  }

81

}

Personalize a navegação por pontos

A aparência inicial da navegação por pontos é esta:

Por que não torná-lo mais informativo e atraente? Para conseguir isso, adicionaremos alguns estilos e atualizaremos sua marcação padrão durante a inicialização do plugin.

Aqui está a navegação atualizada:

Os estilos necessários:

1

.section-with-carousel .swiper-pagination-bullets {

2

  position: static;

3

  display: flex;

4

  justify-content: center;

5

  margin-top: 10px;

6

}

7

8

.section-with-carousel .swiper-pagination-bullets .swiper-pagination-bullet {

9

  display: flex;

10

  flex-direction: column;

11

  align-items: center;

12

  justify-content: center;

13

  width: auto;

14

  height: auto;

15

  background: transparent;

16

  opacity: 0.5;

17

  margin: 0 8px;

18

  border-radius: 0;

19

  transition: opacity 0.3s;

20

}

21

22

.section-with-carousel

23

  .swiper-pagination-bullets

24

  .swiper-pagination-bullet

25

  .line {

26

  width: 3px;

27

  height: 3px;

28

  background: black;

29

  transition: transform 0.3s;

30

}

31

32

.section-with-carousel

33

  .swiper-pagination-bullets

34

  .swiper-pagination-bullet

35

  .number {

36

  opacity: 0;

37

  transform: translateY(-7px);

38

  transition: all 0.3s;

39

}

40

41

.section-with-carousel

42

  .swiper-pagination-bullets

43

  .swiper-pagination-bullet.swiper-pagination-bullet-active {

44

  opacity: 1;

45

}

46

47

.section-with-carousel

48

  .swiper-pagination-bullets

49

  .swiper-pagination-bullet.swiper-pagination-bullet-active

50

  .line {

51

  transform: scaleX(8);

52

}

53

54

.section-with-carousel

55

  .swiper-pagination-bullets

56

  .swiper-pagination-bullet.swiper-pagination-bullet-active

57

  .number {

58

  opacity: 1;

59

  transform: none;

60

}

Certifique-se de clicar em um ponto para ver a pequena animação de slide que acontece.

4. Adicione o JavaScript

Neste ponto, estamos prontos para voltar nossa atenção para JavaScript.

Seções de carrossel de deslocamento

Como você pode ver nas visualizações anteriores, as seções do carrossel ficarão em tela inteira em telas de até 1199px de largura. Em telas maiores, o lado esquerdo ou direito deixará de ser tela inteira e ficará alinhado à largura do contêiner. Como discutido anteriormente, esse comportamento será determinado pelo section-with-left-offset e section-with-right-offset Aulas. Desta forma poderemos gerar layouts únicos que não ficarão limitados a seções que seguem um sistema de grade.

Aqui está o código JavaScript que implementa esta funcionalidade:

1

createOffsets();

2

window.addEventListener("resize", createOffsets);

3

4

function createOffsets() {

5

  const sectionWithLeftOffset = document.querySelector(

6

    ".section-with-left-offset"

7

  );

8

  const sectionWithLeftOffsetCarouselWrapper = sectionWithLeftOffset.querySelector(

9

    ".carousel-wrapper"

10

  );

11

  const sectionWithRightOffset = document.querySelector(

12

    ".section-with-right-offset"

13

  );

14

  const sectionWithRightOffsetCarouselWrapper = sectionWithRightOffset.querySelector(

15

    ".carousel-wrapper"

16

  );

17

  const offset = (window.innerWidth - 1100) / 2;

18

  const mqLarge = window.matchMedia("(min-width: 1200px)");

19

20

  if (sectionWithLeftOffset && mqLarge.matches) {

21

    sectionWithLeftOffsetCarouselWrapper.style.marginLeft = offset + "px";

22

  } else {

23

    sectionWithLeftOffsetCarouselWrapper.style.marginLeft = 0;

24

  }

25

26

  if (sectionWithRightOffset && mqLarge.matches) {

27

    sectionWithRightOffsetCarouselWrapper.style.marginRight = offset + "px";

28

  } else {

29

    sectionWithRightOffsetCarouselWrapper.style.marginRight = 0;

30

  }

31

}

Inicializar o Swiper

Esta é a última etapa necessária para inicializar o Swiper. Aqui, passamos como parte do objeto de configuração todas as nossas customizações. Veja o trecho de código relevante abaixo:

1

const sectionsWithCarousel = document.querySelectorAll(

2

  ".section-with-carousel"

3

);

4

5

for (const section of sectionsWithCarousel) {

6

  let slidesPerView = [1.5, 2.5, 3.5];

7

  if (section.classList.contains("section-with-left-offset")) {

8

    slidesPerView = [1.5, 1.5, 2.5];

9

  }

10

  const swiper = section.querySelector(".swiper");

11

  new Swiper(swiper, {

12

    slidesPerView: slidesPerView[0],

13

    spaceBetween: 15,

14

    loop: true,

15

    lazyLoading: true,

16

    keyboard: {

17

      enabled: true

18

    },

19

    navigation: {

20

      prevEl: section.querySelector(".carousel-control-left"),

21

      nextEl: section.querySelector(".carousel-control-right")

22

    },

23

    pagination: {

24

      el: section.querySelector(".swiper-pagination"),

25

      clickable: true,

26

      renderBullet: function (index, className) {

27

        return `
${className}>

28

            ${index + 1}

29

30

        `;

31

      }

32

    },

33

    breakpoints: {

34

      768: {

35

        slidesPerView: slidesPerView[1]

36

      },

37

      1200: {

38

        slidesPerView: slidesPerView[2]

39

      }

40

    }

41

  });

42

}

Como você pode ver, passamos em um array o número de slides que devem aparecer dependendo da largura da viewport. Usando não apenas números inteiros, mas também decimais, seremos capazes de mostrar apenas uma parte de um slide.

Mesmo que não seja necessário, os valores do ponto de interrupção que determinam quando o número de slides visíveis muda corresponderão aos pontos de interrupção do Bootstrap. De qualquer forma, não deixe de ler a documentação da API para entender melhor o que todos esses parâmetros de configuração fazem.

Conclusão

E terminamos, pessoal! Neste tutorial, criamos um layout de página assimétrico com apenas algumas linhas de código JavaScript e o poder do Swiper.js.

Cobrimos apenas o básico deste plugin. Existem muitos controles deslizantes mais avançados que você pode criar com o mínimo de esforço. Basta se inspirar em uma fonte como o Dribbble e praticar! Esta é a melhor maneira de aprender!

Vejamos novamente o que construímos:

Como sempre, muito obrigado pela leitura!

Mais tutoriais de controle deslizante, lightbox e carrossel

Tutorial em vídeo do Swiper.js