Login
Sliders

Testimonials Swiper

15 Sep 2022

This is Testimonial Swiper
HTML
SCSS
PostCSS
JS 
                            <!--Testimonials-swiper.html-->

<script locals>
  module.exports = {
    testimonials: [
      {
        name: "Test",
        text: "Ad eaque sed placeat beatae odio a dolorum dicta sunt suscipit deserunt?",
      },
      {
        name: "Test 2",
        text: "2 Ad eaque sed placeat beatae?",
      },
      {
        name: "Test 3",
        text: "2 Ad eaqasd asd sad asdue sed placeat beatae?",
      },
      {
        name: "Test 5",
        text: "2 Ad asfdasd eaque sed placeat beatae?",
      },
    ],
  };
</script>

<section class="testimonials-swiper-section">
  <div class="cont">
    <div class="top-wrap">
      <h3>Testimonials Swiper</h3>
      <div class="swiper-buttons btn-wrap-circle">
        <span class="circle-btn testimonials-swiper-btn prev">
          <i class="icon-arrow-prev"></i>
        </span>
        <span class="circle-btn testimonials-swiper-btn next">
          <i class="icon-arrow-next"></i>
        </span>
      </div>
    </div>
    <div class="testimonials-swiper">
      <div class="swiper-wrapper">
        <each loop="item in testimonials">
          <div class="swiper-slide">
            <div class="testimonial-card">
              <h4>{{item.name}}</h4>
              <p>{{item.text}}</p>
            </div>
          </div>
        </each>
      </div>
    </div>
  </div>
</section>

                        
                            /* Testimonials Styles */
.testimonial-card {
  padding-top: ac(40px, 30px);
  padding-left: ac(64px, 32px);
  border-top: solid ac(4px, 2px) var(--primary);
  position: relative;

  &::before {
    content: '"';
    position: absolute;
    left: ac(10px, 5px);
    top: ac(40px, 30px);

    color: var(--primary);
    font-size: ac(72px, 48px);
    line-height: 1;
  }
}

.testimonials-swiper-section {
  margin: ac(120px, 50px) 0;
}

.testimonials-swiper {
  .swiper-slide {
    width: calc(50% - 25px);

    @include transition-all;

    @include media(900) {
      width: 100%;
    }
  }
}
                        
                            /* Testimonials Styles */
.testimonial-card {
    padding-top: ac(40px, 30px);
    padding-left: ac(64px, 32px);
    border-top: solid ac(4px, 2px) var(--primary);
    position: relative;

    &::before {
        content: '"';
        position: absolute;
        left: ac(10px, 5px);
        top: ac(40px, 30px);

        color: var(--primary);
        font-size: ac(72px, 48px);
        line-height: 1;
    }
}

.testimonials-swiper-section {
    margin: ac(120px, 50px) 0;
}

.testimonials-swiper {
    .swiper-slide {
        width: calc(50% - 25px);

        @mixin transition-all;

        @mixin media 900 {
            width: 100%;
        }
    }
}
                        
                            // Testimonials Swiper
    const testimonialsSection = document.getElementsByClassName(
        `testimonials-swiper-section`
    )[0];
    if (testimonialsSection) {
        const testimonialSwiperBlock = testimonialsSection.querySelector(
            ".testimonials-swiper"
        );
        const testimonialsArr = Array.from(
            testimonialsSection.querySelectorAll(".swiper-slide")
        );

        MetaSwiper(".testimonials-swiper", {
            observer: true,
            slidesPerView: "auto",
            spaceBetween: 50,

            // Navigation
            navigation: {
                nextEl: ".testimonials-swiper-btn.next",
                prevEl: ".testimonials-swiper-btn.prev",
            },

            loop: true,
            speed: 800,
            autoplay: {
                enabled: true,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },
        });
    }
2