Ionic image carousel

Ionic image carousel

1. Using ion-slide can achieve image carousel. However, adding only ion-slide in html is far from enough. There are two problems:

(Note: angularjs is used. First, inject $ ionicSlideBoxDelegate into the js file)

1. Sometimes images cannot be loaded. Solution:

Add $ ionicSlideBoxDelegate. update () in the corresponding controller file ();

2. The solution to the last non-Carousel problem is:

Add $ ionicSlideBoxDelegate. loop (true) in the corresponding controller file );

The Code is as follows:

1 function getMessageInface () {2 vm. condition = {// input parameter 3 "sysid": 1000, 4 "token": "sfiodfndsig" 5}; 6 Service. post ('advertisement ', 'findeffectivedatainfo', vm. condition ). then (function (data) {7 8 console. log (data) 9 vm. ADlists = data; 10 angular. forEach (vm. ADlists, function (index) {11 // statements12 // console. log ("cyclically add imgurl"); 13 if (index. pic. indexOf ("http") <0) {14 index. pic = vm. imgUrl + index. pic; 15 // console. log (index. pic) 16} 17}); 18 $ ionicSlideBoxDelegate. loop (true); // solves the problem of not carousel to the last one 19 $ ionicSlideBoxDelegate. update (); // solve the problem of image loading failure 20}); 21 22 23}

The injection method is as follows:

(Function (){
Angular. module ('app'). controller ('goodslistctrl ', goodsListCtrl );
GoodsListCtrl. $ inject = ['$ scope', '$ statstate', 'service',' $ stateParams ',' $ localstore', '$ ionicSlideBoxDelegate', '$ ionicPopup'];

Function goodsListCtrl ($ scope, $ state, Service, $ stateParams, $ localStorage, $ ionicSlideBoxDelegate, $ ionicPopup ){
Var vm = this;

......

......

}

})();

 

3. Use $ ionicSlideBoxDelegate. loop (true) will have a problem that has not yet been understood: when loading two images, four will be displayed, that is, two will be repeated, and other situations are normal. So my final solution is to achieve manual carousel according to official documents ......