The solution to the problem that using Swiper in AngularJS to create a scroll chart that cannot slide

Swiper is currently a popular mobile touch sliding plug-in. Because it is simple, easy to use and easy to use, it is welcomed by many front-end developers.

I encountered this problem when using Swiper today:

Use angularjs dynamic loop to generate the swiper-slide class, and generate more than 6 sliding pages in swiper-wrapper, but it just can’t be drawn Go to the second page and try to modify the value of longSwipesRatio to the minimum, but it still doesn't work.

<div class="swiper-wrapper" >
<!-- =======循环部分======= -->
<div class="swiper-slide" ng-repeat="result in mediaList">
//此处为一个滑动页内容
</div> 
<!-- ============== -->
</div>
</div>

During testing, we found that if we manually copy n loop parts, we can slide n blocks; we can manually adjust the window size so that after the page document changes (dynamic response), we can slide normally.

So I guess the mechanism of swiper is: during initialization, it automatically scans how many swiper-slide class blocks there are under the swiper-wrapper class, and then how many blocks are allowed to slide. In Angular, it is always defined after swiper is initialized, and swiper cannot correctly scan how many slides there are (actually finding a template to be looped), so it cannot move.

After finding the cause, you just need to prescribe the right medicine. When checking Swiper's API, I found that there are two parameters: observer and observeParents. The former starts the dynamic checker and automatically initializes swiper when changing the style of swiper (such as hiding/showing) or modifying the sub-elements of swiper. The principle of the latter is the same as the former, except that observation is applied to the parent element of Swiper. The default value for both is false. So just 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,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})

The above is the solution that the editor introduces to you when using Swiper to make scrolling images that cannot slide in AngularJS. I hope it will be helpful to you. If you have any questions, please let us know. I will leave a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles about using Swiper in AngularJS to create scrolling images that cannot slide, please pay attention to the PHP Chinese website!