Question

我在项目中使用的是Angle 7，我需要使用swiper slider by idangero制作一个highligth部分，但是在使用*ngFor时遇到了问题，我可以正确渲染数据，但滑块无法播放，但打开后我使用ctr + shift + i或控制台。并且仅卡住了我输入的最后一个数据。我要实现的是一个可呈现this page之类的数据的滑块。

我已经阅读了本主题，但仍不能解决我的问题：

Swiper issue after append slides

Swiper slider not working unless page is resized

这是我的 html 代码：

<!-- start slider section -->
<section class="no-padding main-slider height-100 mobile-height wow fadeIn ">
  <div class="swiper-full-screen swiper-container height-100 width-100 black-move">
    <div class="swiper-wrapper">

      <!-- start slider item -->
      <div class="swiper-slide cover-background" style="background-image:url('http://placehold.it/1920x991');" *ngFor="let data of allNews">
        <div class="container position-relative full-screen">
          <div class="col-md-12 slider-typography text-center text-md-left">
            <div class="slider-text-middle-main">
              <div class="slider-text-middle">
                <h1 class="alt-font text-extra-dark-gray font-weight-700 letter-spacing-minus-1 line-height-80 width-55 margin-35px-bottom lg-width-60 md-width-70 lg-line-height-auto sm-width-100 sm-margin-15px-bottom">{{data.title}}</h1>

                <p class="text-extra-dark-gray text-large margin-four-bottom width-40 lg-width-50 md-width-60 sm-width-100 sm-margin-15px-bottom">{{data.summary}}</p>

                <div class="btn-dual">
                  <a href="#" target="_blank" class="btn btn-transparent-dark-gray btn-rounded btn-small margin-20px-lr sm-margin-5px-top">Selengkapnya</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end slider item -->

    </div>
    <!-- start slider pagination -->
    <div class="swiper-pagination swiper-full-screen-pagination"></div>
    <!-- end slider pagination -->
  </div>
</section>
<!-- end slider section -->

用于 json：

[{
    "_id": "5ceac4c07b8ae43702a9ed75",
    "title": "test 1",
    "summary": "Very Test 1",
    "imageCover": "5ceac4c07b8ae43702a9ed76 Cover.jpg"
  },
  {
    "_id": "5ceaa000e5f34b3a55b456ed",
    "title": "Test 2",
    "summary": "Very Test 2",
    "imageCover": "5ceaa000e5f34b3a55b486ed Cover.jpg"
  }
],

有人可以帮我解决这个问题吗？数据本身已经呈现，但滑动器无法自动播放，我无法手动

Answer 1

从未使用过滑动器，但是根据他们的getting started页面，您需要“快速启动”它。

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

由于这看起来取决于要工作的DOM，因此我确保在视图完全加载后运行它。

类似

 import Swiper from 'swiper';

 // ...

 ngAfterViewInit() {
    const mySwiper = new Swiper('.swiper-container');
 }

据我所知，这显然可行：demo with your code

为什么使用* ngFor后不显示滑动滑块

1 个答案: