ui.swiper

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 --save https://github.com/RedCastor/ui-swiper.git#2.4.1

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 projectangular.module('app', ['ui.swiper']);

Sample Usage :

                    
<ui-swiper>
    <ui-swiper-slides>
        <ui-swiper-slide>Slide1</ui-swiper-slide>
        <ui-swiper-slide>Slide2</ui-swiper-slide>
    </ui-swiper-slides>
    <ui-swiper-prev></ui-swiper-prev>
    <ui-swiper-next></ui-swiper-next>
    <ui-swiper-pagination></ui-swiper-pagination>
</ui-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

Paging

Paging and navigation

3D Cube Effect

Events

Access the Swiper instance

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

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

<button ng-click="setSlide(1);"<Go to Slide 2</button>;
                    

HTML Code in each slide