This is an angular implementation of http://idangero.us/swiper/get-started/ This requires no dependencies and written entirely in angular! ( That means no swiper install or jquery install necessary )

Install

bower install angular-ui-swiper

Add files

<link rel="stylesheet" href="bower_components/angular-ui-swiper/dist/angular-ui-swiper.css"/>
<script src="bower_components/angular-ui-swiper/dist/angular-ui-swiper.js"></script>

Usage

Add the module dependency to your project angular.module('app', ['ui.swiper']);

Sample Usage :

<swiper>
  <slides>
    <slide>Slide1</slide>
    <slide>Slide2</slide>
  </slides>
  <prev></prev>
  <next></next>
  <pagination></pagination>
</swiper>

See here you added a swiper with pagination and directional buttons. Within the slide tag you can put whatever html you want to put in there!

Default Setup

Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9

Paging

Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9

Paging and navigation

Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9

3D Cube Effect

Events

Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9

ng-repeat

{{slide}}

Access the Swiper instance


  <script>
  ...
  $scope.setSlide = function (index) {
    $scope.instance.slideTo(index, 300);
  };
  ...
  </script>

  <swiper instance="instance">
    <slides>
      <slide>Slide1</slide>
      <slide>Slide2</slide>
    </slides>
    <prev></prev>
    <next></next>
    <pagination></pagination>
  </swiper>

  <button ng-click="setSlide(1);"<Go to Slide 2</button<
  
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9