<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demos</title> <link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css"> <style> .myslides { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; height: 100px; border-bottom: 1px solid gray; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div ng-app="demoApp"> <div class="myslides"> <ks-swiper-container loop="false" show-nav-buttons="false" slides-per-view="4" space-between="5" pagination-clickable="false"> <ks-swiper-slide ng-repeat="s in [1,2,3,4,5,6,7,8,9,10,11,12,13,14]"> <img ng-src="http://api.randomuser.me/portraits/thumb/men/{{s}}.jpg"> </ks-swiper-slide> </ks-swiper-container> </div> <div class="myslides"> <ks-swiper-container loop="false" show-nav-buttons="false" slides-per-view="4" space-between="5" pagination-clickable="false"> <ks-swiper-slide> <img ng-src="http://api.randomuser.me/portraits/thumb/men/1.jpg"> </ks-swiper-slide> <ks-swiper-slide> <img ng-src="http://api.randomuser.me/portraits/thumb/men/2.jpg"> </ks-swiper-slide> </ks-swiper-container> </div> <div class="myslides"> <ks-swiper-container loop="true" show-nav-buttons="true" slides-per-view="4" space-between="5" pagination-clickable="false"> <ks-swiper-slide ng-repeat="s in [1,2,3,4,5]"> <img ng-src="http://api.randomuser.me/portraits/thumb/women/{{s}}.jpg"> </ks-swiper-slide> </ks-swiper-container> </div> <div class="myslides" ng-controller="TestCtrl"> <ks-swiper-container autoplay="1000" swiper="swiper" on-ready="onReadySwiper(swiper)"> <ks-swiper-slide ng-repeat="s in [1,2,3,4,5,6,7,8,9,10,11,12,13,14]"> <img ng-src="http://api.randomuser.me/portraits/thumb/men/{{s}}.jpg"> </ks-swiper-slide> </ks-swiper-container> <button ng-click="next()">Next</button> </div> </div> <script src="../bower_components/swiper/dist/js/swiper.js"></script> <script src="../bower_components/angular/angular.js"></script> <script src="../dist/angular-swiper.js"></script> <script> var module = angular.module('demoApp', ['ksSwiper']); module.controller('TestCtrl', function($scope) { $scope.swiper = {}; $scope.next = function() { $scope.swiper.slideNext(); }; $scope.onReadySwiper = function(swiper) { console.log('onReadySwiper'); swiper.on('slideChangeStart', function() { console.log('slideChangeStart'); }); }; }); </script> </body> </html>