Login
Sliders

Slider with effect creative

29 Nov 2022

Slider with effect creative
HTML
SCSS
PostCSS
JS 
                            <section class="jobs-slider-sec">
  <div class="cont">
    <div class="jobs-slider-sec__wrap">
      <h2 class="title">Jobs</h2>
      <a href="#" class="latest-jobs-sec__link-all"> View All Jobs </a>
      <div class="thumbs-slider">
        <div class="swiper thumbs-slider-top">
          <div class="swiper-wrapper">
            <div class="swiper-slide thumbs-slider-top__photo">
              <span class="overlay"></span>
              <img src="images/teams-1.jpg" alt="" />
            </div>
            <div class="swiper-slide thumbs-slider-top__photo">
              <span class="overlay"></span>
              <img src="images/teams-2.jpg" alt="" />
            </div>
            <div class="swiper-slide thumbs-slider-top__photo">
              <span class="overlay"></span>
              <img src="images/teams-3.jpg" alt="" />
            </div>
            <div class="swiper-slide thumbs-slider-top__photo">
              <span class="overlay"></span>
              <img src="images/teams-4.jpg" alt="" />
            </div>
          </div>
        </div>
        <div thumbsSlider="" class="swiper mySwiper thumbs-slider-bottom">
          <div class="swiper-wrapper">
            <div class="swiper-slide latest-jobs__job">
              <div class="text">
                <h3>Lorem ipsum</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
              <a href="#" class="btn latest-jobs__btn"> Read more ›</a>
            </div>
            <div class="swiper-slide latest-jobs__job">
              <div class="text">
                <h3>Lorem ipsum</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
              <a href="#" class="btn latest-jobs__btn"> Read more ›</a>
            </div>
            <div class="swiper-slide latest-jobs__job">
              <div class="text">
                <h3>Lorem ipsum</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
              <a href="#" class="btn latest-jobs__btn"> Read more ›</a>
            </div>
            <div class="swiper-slide latest-jobs__job">
              <div class="text">
                <h3>Lorem ipsum</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
              <a href="#" class="btn latest-jobs__btn"> Read more ›</a>
            </div>
          </div>
        </div>
        <span class="circle-btn thumbs-slider__prev">
          <i class="icon-arrow-prev"></i>
        </span>
        <span class="circle-btn thumbs-slider__next">
          <i class="icon-arrow-next"></i>
        </span>
      </div>
    </div>
  </div>
</section>
                        
                            .btn-wrap-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: ac(40px, 30px);

  .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);
  }
}

.jobs-slider-sec {
  &__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
}

.thumbs-slider {
  padding-top: ac(50px, 20px);
  padding-bottom: ac(100px, 50px);
  position: relative;
  width: calc(100% - 72px - 72px);

  .thumbs-slider-top {
    padding-top: ac(50px, 30px);
    width: 100%;
    max-width: 340px;
    overflow: visible;

    .swiper-slide {
      position: relative;
      border-radius: 50%;
      height: 340px;
      width: 340px;
      transition: all 0.3s ease;

      &.swiper-slide-active {
        opacity: 1;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .overlay {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
      }
    }

    @include media(1550) {
      max-width: 300px;
      
      .swiper-slide {
        width: 300px;
        height: 300px;
      }
    }

    @include media(1400) {
      max-width: 280px;
      
      .swiper-slide {
        width: 280px;
        height: 280px;
      }
    }

    @include media(1275) {
      padding-bottom: 50px;
    }
  }

  .thumbs-slider-bottom {
    padding-top: ac(40px, 30px);
    width: 100%;
    max-width: 900px;
    overflow: hidden;

    .swiper-slide {
      max-width: 100%;
    }

    .swiper-wrapper {
      max-width: 900px;
    }

    @include media(1275) {
      padding-top: 40px;
    }
  }

  &__prev,
  &__next {
    cursor: pointer;
    top: 196px;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease;

    &:hover {
      transition: all 0.3s ease;
    }

    &.swiper-button-disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    @include media(1275) {
      top: 370px;
    }
  }

  &__prev {
    left: min(max(-40px, -3.75vw), -72px);

    &:hover {
      transform: translateX(-5px);
    }

    @include media(1275) {
      left: 50%;
      transform: translateX(-125%);

      &:hover {
        transform: translateX(-125%) scale(1.1);
      }
    }
  }

  &__next {
    right: min(max(-40px, -3.75vw), -72px);

    &:hover {
      transform: translateX(5px);
    }

    @include media(1275) {
      right: 50%;
      transform: translateX(125%);

      &:hover {
        transform: translateX(125%) scale(1.1);
      }
    }
  }

  @include media(900) {
    width: 95%;
  }
}
                        
                            .btn-wrap-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: ac(40px, 30px);

  .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);
  }
}

.jobs-slider-sec {
  &__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
}

.thumbs-slider {
  padding-top: ac(50px, 20px);
  padding-bottom: ac(100px, 50px);
  position: relative;
  width: calc(100% - 72px - 72px);

  .thumbs-slider-top {
    padding-top: ac(50px, 30px);
    width: 100%;
    max-width: 340px;
    overflow: visible;

    .swiper-slide {
      position: relative;
      border-radius: 50%;
      height: 340px;
      width: 340px;
      transition: all 0.3s ease;

      &.swiper-slide-active {
        opacity: 1;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .overlay {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
      }
    }

    @mixin media 1550 {
      max-width: 300px;
      .swiper-slide {
        width: 300px;
        height: 300px;
      }
    }

    @mixin media 1400) {
      max-width: 280px;
      .swiper-slide {
        width: 280px;
        height: 280px;
      }
    }

    @mixin media 1275 {
      padding-bottom: 50px;
    }
  }

  .thumbs-slider-bottom {
    padding-top: ac(40px, 30px);
    width: 100%;
    max-width: 900px;
    overflow: hidden;

    .swiper-slide {
      max-width: 100%;
    }

    .swiper-wrapper {
      max-width: 900px;
    }

    @mixin media 1275 {
      padding-top: 40px;
    }
  }

  &__prev,
  &__next {
    cursor: pointer;
    top: 196px;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease;

    &:hover {
      transition: all 0.3s ease;
    }

    &.swiper-button-disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    @mixin media 1275 {
      top: 370px;
    }
  }

  &__prev {
    left: min(max(-40px, -3.75vw), -72px);
    &:hover {
      transform: translateX(-5px);
    }

    @mixin media 1275 {
      left: 50%;
      transform: translateX(-125%);

      &:hover {
        transform: translateX(-125%) scale(1.1);
      }
    }
  }

  &__next {
    right: min(max(-40px, -3.75vw), -72px);
    &:hover {
      transform: translateX(5px);
    }

    @mixin media 1275 {
      right: 50%;
      transform: translateX(125%);

      &:hover {
        transform: translateX(125%) scale(1.1);
      }
    }
  }

  @mixin media 900 {
    width: 95%;
  }
}
                        
                            const thumbsSliders = document.getElementsByClassName(`thumbs-slider`)[0];

  if (thumbsSliders) {
    const thumbsSwiperBottom = new Swiper(".thumbs-slider-bottom", {
      slidesPerView: 1,
      effect: "fade",
      loop: true,
      fadeEffect: {
        crossFade: true,
      },
      allowTouchMove: false,
    });

    const thumbsSwiperTop = new Swiper(".thumbs-slider-top", {
      slidesPerView: 1,
      loop: true,
      navigation: {
        nextEl: ".thumbs-slider__next",
        prevEl: ".thumbs-slider__prev",
      },
      effect: "creative",
      grabCursor: true,
      creativeEffect: {
        limitProgress: 3,
        progressMultiplier: 0.8,
        prev: {
          translate: ["-67%", 0, 0],
          scale: 0.77,
          opacity: 0.5,
        },
        next: {
          translate: ["67%", 0, 0],
          scale: 0.77,
          opacity: 0.5,
        },
      },
      thumbs: {
        swiper: thumbsSwiperBottom,
      },
    });

    thumbsSwiperBottom.slides.forEach((elem, index) => {
      elem.addEventListener("click", (e) => {
        thumbsSwiperTop.slideTo(index);
      });
    });
  }

Слайдер з модифікованим ефектом "creative". Для такого ефекту був модифікований swiper-bundle.js. Для роботи такого слайдера треба підключити саме його.

Якщо буде потреба модифікувати ще його, то треба дивитися починаючи з рядка 9574 файлу swiper-bundle.js.

потрібний рядок<br>

потрібний рядок

Також тут додан фікс для багу на Сафарі 11.1-12 на якому thumbsSwiper не працював.

swiper-bundle.rar

1