Voltar

Postado em 29 de janeiro de 2023

Snippets Swiper

Atalhos

Requisitos

Você deverá inserir primeiramente estas duas tags de CDN

A de estilos no Head do site

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css”/>

E a segunda antes da tag de fechamento do body

<script src=”https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js”></script>

Swiper com pagination, automatico e responsivo

É um slide básico porém com responsivo, automático e com botões de navegação.

Código HTML

Neste código preste atenção nos textos em destaque pois serão eles que farão conexão com o javaScript

<section class="s-home-hero">
  <div class="swiper slide-section-hero-enterprise">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p>Conteúdo do Slide</p>
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <div class="swiper-pagination-section-hero-enterprise"></div>
</section>

Código JavaScript

Neste código preste atenção nos textos em destaque pois serão eles que farão conexão com o HTML

var swiper = new Swiper(".slide-section-hero-enterprise", {
    slidesPerView: 1,
    loop: true,
    autoplay: {
      delay: 3500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination-section-hero-enterprise",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      375: {
        slidesPerView: 1,
      },
      400: {
        slidesPerView: 1,
      },
      430: {
        slidesPerView: 1,
      },
      450: {
        slidesPerView: 1,
      },
      480: {
        slidesPerView: 1,
      },
      600: {
        slidesPerView: 1,
      },
      640: {
        slidesPerView: 1,
      },
      768: {
        slidesPerView: 1,
      },
      1024: {
        slidesPerView: 1,
      },
      1920: {
        slidesPerView: 1,
      },
    },
  });

 

Swiper com manipulação de botões

Ao clicar nos botões o Slide selecionado aparece

Código HTML

Neste código preste atenção nos textos em destaque pois serão eles que farão conexão com o javaScript

<section class="s-single-empreendimentos-plants">
  <div class="container">
    <h2>Plantas</h2>
    <div class="s-plants-slides">
      <div class="swiper slide-plants-full">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <p>Conteudo do Slide</p>
          </div>
        </div>
      </div>
      <div thumbsSlider="" class="swiper slide-plants-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="thumb-action-button">
              <p>Conteudo da Botão</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Código JavaScript

Neste código preste atenção nos textos em destaque pois serão eles que farão conexão com o HTML

var swiper = new Swiper(".slide-plants-thumbs", {
    freeMode: true,
    watchSlidesProgress: true,
  });
  var swiper2 = new Swiper(".slide-plants-full", {
    thumbs: {
      swiper: swiper,
    },
  });

Swiper com manipulação de botões e timer

Ao clicar no icone o slide aparece ou quando o timer completar 100%

Código HTML

Neste código preste atenção nos textos em destaque pois serão eles que farão conexão com o javaScript

<section class="s-hero">
  <div class="slide-thumbnail">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p>Conteúdo do Botão</p>
      </div>
    </div>
  </div>
  <div class="slide-principal">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide-01">
        <p>Conteúdo do Slide</p>
      </div>
    </div>
  </div>
  <div class="swiper-progress-bar js-progress">
    <div class="slide-progress-bar">
    </div>
  </div>
</section>



Código SASS


Neste código preste atenção nos textos em destaque pois serão eles que farão conexão com as classes no HTML e no JS, pois algumas classes serão adicionadas no HTML através do JS.


.swiper-progress-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: block;
    z-index: 3;
    .slide-progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: auto;
      height: 0.3rem;
      opacity: 0;
      display: block;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: $primary-default;
        width: 0;
        height: 100%;
        transition: width 0.1s linear;
      }
    }
    &.active {
      .slide-progress-bar {
        opacity: 1;
      }
          }
    &.animate {
      .slide-progress-bar {
        &::after {
          width: 100%;
          transition: width 5s linear;
        }
      }
    }
  }





Código JavaScript


Neste código preste atenção nos textos em destaque pois serão eles que farão conexão com o HTML


var slide_thumbnail = new Swiper(".slide-thumbnail", {
  slidesPerView: 5,
  direction: "vertical",
  spaceBetween: 20,
  watchSlidesProgress: true,
  breakpoints: {
    320: {
      direction: 'horizontal',
    },
    1150: {
      direction: 'vertical',
    }
  }
});

const progressSlide = document.querySelector('.js-progress')

var slide_hero = new Swiper(".slide-principal", {
  effect: "fade",
  thumbs: {
    swiper: slide_thumbnail,
  },
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
  on: {
    init: function() {
      progressSlide.classList.remove('animate')
      progressSlide.classList.remove('active')
      progressSlide.classList.add('animate')
      progressSlide.classList.add('active')
    },
    slideChangeTransitionStart: function() {
      progressSlide.classList.remove('animate')
      progressSlide.classList.remove('active')
      progressSlide.classList.add('active')

    },
    slideChangeTransitionEnd: function() {
      progressSlide.classList.add('animate')
    }
  }
});