滑动滑块SVG图标有时不在角材svg图标中显示

Question

当我使用角状材质的SVG图标时，Swiper有时不显示SVG图标。

我正在以这种方式使用svg图标-Svg Icon Reference here

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>

类型脚本代码（配置代码）

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

为进一步澄清，我只附加了图像。因此，请看有时显示或有时不显示图标。

我正在使用Angular 6并用"swiper": "^3.4.2"打包此

Answer 1

感谢这个线程https://github.com/nolimits4web/swiper/issues/2629#issuecomment-737897281，我得以解决该错误。

解决方案

将以下内容添加到您的配置中

$(function () {
  var li1 = $(".categories .menu");

  $.each(li1, function (index, element) {
    var li1Value = $(this).attr("data-megamenu");
    console.log(li1Value);
    //li1.attr("data-target", "#" + li1Value);
    $(this).attr('data-target', li1Value);
    li1.attr("data-toggle", "collapse");
  });
});

警告

• 仅当您使用带有自定义svg的mat-icon时才需要
• 它将复制DOM元素并将其粘贴为下一个元素
• 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 } 选项对我不起作用
• auto用于修复firefox显示错误