Swiper. js превью в Angular приложении синхронизировано предыдущая и следующая - PullRequest
Новая
       10

Swiper. js превью в Angular приложении синхронизировано предыдущая и следующая

0 голосов
/ 10 апреля 2020

Поэтому я использую Swiper. js для многослойной карусели в приложении angular. По существу было три swiper-containers, чьи функциональные возможности должны дополнять друг друга. Это расширение их галереи больших пальцев Swiper , где я добавил дополнительную картинку с описанием к изображениям.

Проблемы:

  • Когда я нажимаю на thumnail, основное изображение не выделяется вместе с ним. Мне нужно, чтобы это работало как описание изображения. Проще говоря, когда вы щелкаете мышью на thumnails, описание изображения и предварительный просмотр изображения должны измениться соответственно.
  • Как ни странно, счетчик страниц неверен. Там написано 6 вместо правильного числа 8.

Ниже приведен компонент html: 

<section class="gallery-section">
  <div class="gallery-left">
    <div class="swiper-container gallery-text">
      <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
          <div class="image-controls">
            <div class="swiper-button-prev swiper-button-mobile"></div>
            <div class="swiper-pagination swiper-pagination-mobile"></div>
            <div class="swiper-button-next swiper-button-mobile"></div>
          </div>
          <div class="image-info">
            <div class="image-description">{{ image.description }}</div>
            <div class="image-date">{{ image.date }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-container gallery-thumbs">
      <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
          <figure>
            <img src="{{ image.img }}" alt="">
          </figure>
        </div>
      </div>
    </div>
    <div class="swiper-button-next swiper-button-desktop"></div>
    <div class="swiper-button-prev swiper-button-desktop"></div>
    <div class="swiper-pagination swiper-pagination-desktop"></div>
  </div>
  <div class="gallery-right">
    <div class="swiper-container gallery-main">
      <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let image of imageArray">
          <figure>
            <img src="{{ image.img }}" alt="">
          </figure>
        </div>
      </div>
    </div>
  </div>
</section>

Вот инициализация из файла ts: 

  ngOnInit() {
    imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
      console.log('Images loaded > swiper start');
      var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 5,
        slidesPerView: 3,
        freeMode: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        watchSlidesVisibility: true,
        watchSlidesProgress: true
      });
      var galleryText = new Swiper('.gallery-text', {
        slidesPerView: 1,
        thumbs: {
          swiper: galleryThumbs,
        },
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      });
      var galleryMain = new Swiper('.gallery-main', {
        spaceBetween: 5,
        slidesPerView: 1,
        thumbs: {
          swiper: galleryThumbs
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      });
    });
  }

Наконец, GIF, который, надеюсь, облегчит мою проблему. enter image description here

1 Ответ

0 голосов
/ 10 апреля 2020

Разобрался: 

  ngOnInit() {
    imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
      console.log('Images loaded > swiper start');
      var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 5,
        slidesPerView: 3,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
      });
      var galleryText = new Swiper('.gallery-text', {
        slidesPerView: 1,
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      });
      var galleryMain = new Swiper('.gallery-main', {
        spaceBetween: 5,
        slidesPerView: 1,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        thumbs: {
          swiper: galleryThumbs
        }
      });
      galleryText.controller.control = galleryMain;
      galleryMain.controller.control = galleryText;
    });
  }
...