Значок SVG ползунка Swiper иногда не отображается в значке углового материала svg

Swiper иногда не отображает значки SVG, когда я использую значок углового материала SVG.

Я использую значок svg следующим образом: Ссылка на значок Svg здесь

HTML-код

<swiper [config]="expertExperienceConfig">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="certificationProcess"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CERTIFICATION PROCESS</h2>
                                <span>All your qualifications in one place</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="connectExperts"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CONNECT WITH EXPERTS</h2>
                                <span>Talk to other users. Reach out and introduce yourself.</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="linkRecruiters"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>DIRECT LINK TO RECRUITERS</h2>
                                <span>Share and be seen</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="blockchainVerification"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>BLOCKCHAIN VERIFICATION</h2>
                                <span>Trust, Validity, Convenience</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="planJourney"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CERTIFICATION PROCESS</h2>
                                <span>All your qualifications in one place</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="improveEfficiency"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CERTIFICATION PROCESS</h2>
                                <span>All your qualifications in one place</span>
                            </div>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next" hidden id="swiper-button-next"></div>
                    <div class="swiper-button-prev" hidden id="swiper-button-prev"></div>
                </swiper>

TYPE SCRIPT CODE(Код конфигурации)

expertExperienceConfig: SwiperOptions = {
  loop: true,
  direction: 'vertical',
  slidesPerView: 4,
  autoplay: 1000};

Для большей ясности я просто прикрепил изображение. Так что посмотрите, пожалуйста. Иногда значки отображаются, а иногда нет.

Я использую Angular 6 и swiper "swiper": "^3.4.2" этот пакет

Hasmukh Ahir 07.03.2019 источник

Ответы (1)

arrow_upward
1
arrow_downward

Я смог исправить ошибку благодаря этой теме https://github.com/nolimits4web/swiper/issues/2629#issuecomment-737897281.

Решение

Добавьте в свою конфигурацию следующее

private swiper: Swiper
isSwiperReady = false

expertExperienceConfig: SwiperOptions = {
    loop: true,
    slidesPerView: 2,
    navigation: true,
    on: { // <-- Fix the mat-icon error
      slideChangeTransitionStart: (swiper) => {
        if (!this.isSwiperReady) return

        let $wrapperEl = swiper.$wrapperEl
        let params = swiper.params
        $wrapperEl
          .children('.' + params.slideClass + '.' + params.slideDuplicateClass)
          .each(function () {
            let idx = this.getAttribute('data-swiper-slide-index')
            this.innerHTML = $wrapperEl
              .children(
                '.' +
                  params.slideClass +
                  '[data-swiper-slide-index="' +
                  idx +
                  '"]:not(.' +
                  params.slideDuplicateClass +
                  ')',
              )
              .html()
          })
      },

      slideChangeTransitionEnd: (swiper) => {
        if (!this.isSwiperReady) return

        swiper.slideToLoop(swiper.realIndex, 0, false)
      },
    },
};

constructor() {}

ngOnInit() {
  this.swiper = new Swiper('.my-swiper-ref', expertExperienceConfig)
  this.isSwiperReady = true
}

Осторожность

Это требуется только в том случае, если вы используете матовый значок с пользовательским svg.
Он скопирует элемент DOM и вставит его, как следующий.
Вариант auto мне не подошел
isSwiperReady используется для исправления ошибки отображения Firefox.

Raphaël Balet 07.12.2020