Как сделать определенные переходы с помощью слайдера слайдер Swiper - PullRequest
Новая
       14

Как сделать определенные переходы с помощью слайдера слайдер Swiper

0 голосов
/ 07 февраля 2020

Я работаю над проектом angular с ползунком, сделанным с помощью swiper. у меня был макет, подобный показанному на картинке: https://imgur.com/8uFn1VX

Когда пользователь нажимает кнопку «Далее», второй слайд (меньший) должен go занять положение первого слайда (самое большое), и на его месте будет следующий слайд с переходом.

Я попытался установить параметр swiper'а slidesPerView: 2, и я установил ширину слайда с классом .swiper-slide-active до 70% и с классом .swiper-slide-next при ширине: 30% и абсолютной позицией. Полученное расположение - это то, что мне нужно, как видно на фотографии, но я не могу сделать переход меньшего слайда, который занимает место большего слайда. Я пытался преобразовать: translateY (значение), translateX (значение), но я не получил приличный результат. Несколько советов? 

<div class="swiper-container" #swiper>
    <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let slide of payload.relationships.slides.data">
            <div class="row slider__internal-row">
                <div class="col-12 col-lg-6 col-xl-11 offset-xl-1">
                  <div class="row slider__image align-items-center m-0"[style.background-image]="'url(' + basePath + slide.url + ')' | sanitize: 'style'">
                     <div class="col slider__slide-image">
                        <uni-slider-image [text]="slide.meta.alt [title]="slide.meta.title" *ngIf="slide.meta.alt || slide.meta.title"></uni-slider-image>
                     </div>
                  </div>
                </div>
                <div class="col-12 col-lg-6 col-xl-6 offset-xl-1">
                    <div class="slider__text mt-4">
                        <p class="slider__description">
                            {{slide.meta.description}}
                        </p>
                    </div>
                <p *ngIf="slide.meta.link" class="mb-0 mt-4 text-left">
                    <a [href]="slide.meta.link" class="btn text-primary text-uppercase">Per saperne di più <i class=" fas fa-arrow-right"></i>
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>
</div>

this.swiper = new Swiper(this.galleryRef.nativeElement, {
        slidesPerView: 2,
        autoHeight: true,
        loop: true,
        speed: 1000,
        spaceBetween: 0,
        pagination: {
          el: '.' + this.swiperIdentifier + '-pagination',
          type: 'fraction',
          renderFraction: (currentClass, totalClass) => {
            return `<span class="${currentClass}"></span>/<span class="${totalClass}"></span>`
          }
        },
        navigation: {
          nextEl: '.' + this.swiperIdentifier + '-next',
          prevEl: '.' + this.swiperIdentifier + '-prev'
        }
      })

.swiper-slide-active {
  width: 70% !important;
  transition: all .35s;
}

.swiper-container {
    height: 80vh;
}
.swiper-slide-next {
  width: 30% !important;
  max-width: 30%;
    .slider__internal-row {
        position: absolute;
        top: 300px;
        width: 500px;
        right: 0;
        transition: all 5s;
        .slider__image  {   
            min-height: 250px;
            .slider__slide-image {
                display: none;
            }
        }
    }
}
...