A solution to the swiper of Angularjs in the process of making rolling graphs without sliding _angularjs

Swiper is currently the more popular mobile end touch sliding plug-ins, because of its simple and easy to use, by many front-end developers welcome.

This problem was encountered today when using Swiper:

Use Angularjs dynamic loop generation Swiper-slide class, in Swiper-wrapper generated more than 6 sliding pages, but it is not a second page, try to change the Longswipesratio value to the minimum, still does not work.

<div class= "Swiper-wrapper" >
<!--======= circulation section =======--> <div class=
"Swiper-slide" ng-repeat = "result in Medialist" >
//Here is a sliding page content
</div> 
<!--==============-->
</div>
</div>

The test found that manually copying n parts of the loop, you can slide n blocks, manually adjust the window size, so that the page document changes (dynamic response), you can slide normally.

So the mechanism of guessing swiper is: Automatically scan the number of swiper-slide blocks under the Swiper-wrapper class when initializing, then how many blocks are allowed to slide. While angular is always defined after Swiper initialization, Swiper does not correctly scan how many slide (actually find a loop template), so it doesn't move.

After finding the cause, we should only prescribe the right remedy. When you look up the API for Swiper, there are two parameters: Observer and observeparents, which starts the dynamic checker, automatically initializes swiper when the Swiper style (for example, hide/show) is changed, or when child elements of the Swiper are modified. The latter principle is the same as the former, but applies observe to the Swiper parent element. Both default values are false. So add these two lines to the original Swiper initialization code.

var myswiper = new Swiper ('. Swiper-container ', {
pagination: '. Swiper-pagination ',
paginationclickable:true,
longswipesratio:0.3,
touchratio:1,
observer:true,//when modifying swiper itself or child elements, automatically initialize Swiper observeparents
: true,//automatically initializes swiper} when modifying Swiper parent element

The above is a small set to introduce the ANGULARJS in the use of swiper to make rolling drawings can not slide the solution, I hope to help you, if you have

Any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!