Angular1 and swiper, angular1swiper

Angular1 and swiper, angular1swiper
Swiper cannot be used during angular1 route switching.

Question 1: When angular1 is used, many people write swiper Initialization on the parent controller of the template, which may cause a problem, the swiper Initialization is only performed once when the page is loaded. During the Routing Switching process, the template is reloaded, but the swiper Initialization is not performed. Therefore, swiper is not easy to use.

Solution:You can put the swiper initialization in the controller corresponding to the template..

Question 2: Put the swiper initialization in the corresponding controller. If it is still unavailable. The main reason is the initialization of swiper.

Solution:It is bestA one-time timer is added to the swiper initialization.To properly delay initialization for a short period of time, which can also solve the Skip Problem Caused by swiper loop playback..

The following is part of the demo code. You can refer to it! Index.html 1 <div class = "swiper-container"> 2 <div class = "swiper-wrapper"> 3 <div class = "swiper-slide" ng-repeat = "I in imgs "> 4 5 </div> 6 </div> 7 <div class =" swiper-pagination "> 8 9 </div> 10 </div>Swiper's html TEMPLATE 1 app. controller ("ctrl1", ["$ scope", "$ timeout", function ($ scope, $ timeout) {2 $ scope. imgs = [3 "img/banner1.jpg", 4 "img/banner2.jpg", 5 "img/banner3.jpg" 6]; 7 8 $ timeout (function () {9 new Swiper (". swiper-container ", {10 pagination :". swiper-pagination ", 11 loop: true, 12/* 13 start the dynamic Checker (OB/Viewer), when changing the swiper style (such as hide/show) or, swiper is automatically initialized when the sub-element of swiper is modified. 14 The default false15 attribute can also solve the swiper initialization problem, but when the loop attribute is enabled, there is a carousel jump problem. 16 **/17 // obverser: true18}); 19}, 100); 20 21}]);Controller corresponding to the swiper Template