Login
Sliders

Partners Swiper

20 Sep 2022

Partners swiper slider
HTML
SCSS
PostCSS
JS 
                            <!-- Our Partners  -->
        <section class="partners-swiper-section">
          <div class="cont">
            <div class="top-wrap">
              <h3>Partners Swiper</h3>
              <div class="swiper-buttons btn-wrap-circle">
                <span class="circle-btn partners-swiper-btn prev">
                  <i class="icon-arrow-prev"></i>
                </span>
                <span class="circle-btn partners-swiper-btn next">
                  <i class="icon-arrow-next"></i>
                </span>
              </div>
            </div>
            <div class="partners-swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="./images/partners/partner-1.png" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="./images/partners/partner-2.png" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="./images/partners/partner-3.png" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="./images/partners/partner-4.png" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="./images/partners/partner-5.png" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="./images/partners/partner-6.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </section>
                        
                            .top-wrap{
  padding-bottom: 20px;
}

.partners-swiper-section {
  margin: ac(160px, 70px) 0;
}

.partners-swiper .swiper-wrapper {
  align-items: center;
}

.partners-swiper .swiper-slide img {
  filter: grayscale(1);
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  transition: .25s ease-in-out;
  width: 100%;
}

.btn-wrap-circle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;

  .circle-btn:not(:last-of-type) {
    margin-right: 10px;
  }
}

.circle-btn {
  width: ac(42px, 32px);
  height: ac(42px, 32px);
  border-radius: 50%;
  @include transition-all;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: ac(14px, 11px);
  color: #3cc5fb;
  border: solid 2px var(--white);

  button {
    opacity: 0 !important;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
  }

  &.lg {
    width: ac(52px, 46px);
    height: ac(52px, 46px);
  }

  i,
  &::before,
  &::after {
    font-family: "icomoon";
    position: absolute;
  }

  &:hover {
    opacity: 1 !important;
    color: var(--primary);
    border-color: var(--primary);
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-disabled {
  border-color: #ccc !important;
  color: #ccc !important;
  cursor: not-allowed;
}
                        
                            .top-wrap{
    padding-bottom: 20px;
}

.partners-swiper-section {
    margin: ac(160px, 70px) 0;
}

.partners-swiper .swiper-wrapper {
    align-items: center;
}
.partners-swiper .swiper-slide img {
    filter: grayscale(1);
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transition: .25s ease-in-out;
    width: 100%;
}
.btn-wrap-circle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    .circle-btn:not(:last-of-type) {
        margin-right: 10px;
    }
}

.circle-btn {
    width: ac(42px, 32px);
    height: ac(42px, 32px);
    border-radius: 50%;
    @mixin transition-all;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: ac(14px, 11px);
    color: #3cc5fb;
    border: solid 2px var(--white);

    button {
        opacity: 0 !important;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
    }

    &.lg {
        width: ac(52px, 46px);
        height: ac(52px, 46px);
    }

    i,
    &::before,
    &::after {
        font-family: "icomoon";
        position: absolute;
    }

    &:hover {
        opacity: 1 !important;
        color: var(--primary);
        border-color: var(--primary);
    }
}

.swiper-button-lock {
    display: none;
}

.swiper-button-disabled {
    border-color: #ccc !important;
    color: #ccc !important;
    cursor: not-allowed;
}

                        
                            // Partners Swiper
  const partnersSection = document.getElementsByClassName(
    `partners-swiper-section`
  )[0];
  if (partnersSection) {
    MetaSwiper(".partners-swiper", {
      spaceBetween: 50,
      observer: true,
      speed: 400,
      // Autoplay
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      // Navigation
      navigation: {
        nextEl: ".partners-swiper-btn.next",
        prevEl: ".partners-swiper-btn.prev",
      },
      // Breakpoints
      breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 2,
          spaceBetween: 50,
        },
        // when window width is >= 420px
        420: {
          slidesPerView: 3,
          spaceBetween: 50,
        },
        // when window width is >= 650px
        650: {
          slidesPerView: 4,
          spaceBetween: 42,
        },
        // when window width is >= 769px
        769: {
          slidesPerView: 5,
          spaceBetween: 50,
        },
      },
    });
  }

Для коректної роботи потрібно підключити файли з архіву:

swiper.zip

0