Solution to slide failure when using Swiper to create a scroll chart in AngularJS

Swiper is a popular mobile terminal touch slide plug-in. It is easy to use and get started, and is welcomed by many front-end developers. This article describes how AngularJS uses Swiper to create a scroll chart that cannot be slide. If you need it, you can refer to Swiper, which is a popular mobile terminal touch slide plug-in, because of its ease of use and ease of use, it is welcomed by many front-end developers.

This problem occurs when Swiper is used today:

Use angularjs to dynamically generate the swiper-slide class and generate more than six slide pages in swiper-wrapper. However, if the second page is not displayed, try to minimize the value of longSwipesRatio, still does not work.

  
// Here is a slide page content
 
 

During the test, we found that if you manually copy n cycles, you can slide n blocks. manually adjust the window size so that the page document can slide normally after it changes (dynamic response.

So we guess the swiper mechanism is: during initialization, We will automatically scan the number of swiper-slide class blocks under the swiper-wrapper class, and then we will be able to slide the number of blocks. Angular always defines after swiper initialization, and swiper cannot correctly scan the number of slide (actually finding a template to be cyclic), so it cannot move.

After finding the cause, you only need to take the right medicine. When checking Swiper APIs, we found that there are two parameters: observer and observeParents. The former enables the dynamic checker and changes the swiper style (such as hiding/displaying) or, swiper is automatically initialized when the sub-element of swiper is modified. The principle of the latter is the same as that of the former. It only applies the observe to the parent element of Swiper. The default values are both false. Therefore, add these two lines in the original swiper initialization code.

Var mySwiper = new Swiper ('. swiper-iner ', {pagination :'. swiper-pagination ', paginationClickable: true, longSwipesRatio: 0.3, touchRatio: 1, observer: true, // automatically initialize swiperobserveParents: true, // swiper is automatically initialized when the parent element of swiper is modified })

The above is a small part of AngularJS that uses Swiper to create a rolling chart that cannot be slide. I hope it will help you. If you have

Please leave a message for me if you have any questions. I would like to thank you for your support for PHP chinnet!

For more details about how to use Swiper to create a scroll chart in AngularJS, refer to the PHP Chinese website!