'why swiper slider doesn't play after using *ngFor

I'm using angular 7 for my project and I need to make a highligth section using swiper slider by idangero but i got a problem when using *ngFor i can render the data correctly but the slider won't play except i use ctr + shift + i or console after open it. and got stuck only for the last data I input. what i want to achieve is a slider that render data like this page.

I already read this topic but still not solve my problem:

Swiper issue after append slides

Swiper slider not working unless page is resized

this is my html code:

<!-- 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 -->

for the 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"
  }
],

can someone help me to solve this? the data itself already render but the swiper doesn't autoplay and i can't manually it

htmlcssangularswiper


Solution 1:[1]

Never used swipper, but according to their getting started page, you need to "jump start" it.

import Swiper from 'swiper';

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

since this looks like it depends on the DOM to work, i'd make sure to run it after the view fully loaded.

so something like 

 import Swiper from 'swiper';

 // ...

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

this obviously works as far as I can tell: demo with your code

Solution 2:[2]

Solution for Angular 11+

Swiper needs resize to work properly

or

Try this - add :

(swiper)="onSwiper($event)"

to your swiper HTML component.

<swiper (swiper)="onSwiper($event)"></swiper>

And in your .TS component, add:

onSwiper(swiper) {
  swiper.update();
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Stavm
Solution 2 marc_s

Related Questions