Skip to content
angularJS carousel
Branch: master
Clone or download
Latest commit 1bf14a4 Dec 14, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build fix #13 : build with the correct templateCache module name Dec 8, 2016
e2e finished refactor Nov 22, 2015
gulp Fix templateCache module name Dec 8, 2016
src fix #10 - better add slide handling Dec 7, 2016
.bowerrc Refactor init Nov 21, 2015
.editorconfig Refactor init Nov 21, 2015
.eslintrc finished refactor Nov 22, 2015
.gitignore Refactor init Nov 21, 2015
.yo-rc.json finished refactor Nov 22, 2015
README.md doc:typo in alwaysFill attribute Feb 23, 2016
bower.json Bump 2.0.5 Dec 14, 2016
gulpfile.js Refactor init Nov 21, 2015
karma.conf.js finished refactor Nov 22, 2015
package.json Bump 2.0.5 Dec 14, 2016
protractor.conf.js finished refactor Nov 22, 2015

README.md

Angular Kaarousel

Full angularJS carousel

DEMO

gif

=================

How to use it

    <kaarousel
        displayed="conf.displayed"
        per-slide="conf.perSlide"
        autoplay="conf.autoplay"
        direction="conf.direction"
        pause-on-hover="conf.pauseOnHover"
        center-active="conf.centerActive"
        time-interval="conf.timeInterval"
        stop-after-action="conf.stopAfterAction"
        hide-nav="conf.hideNav"
        hide-pager="conf.hidePager"
        nav-on-hover="conf.navOnHover"
        pager-on-hover="conf.pagerOnHover"
        swipable="conf.swipable"
        sync="conf.sync"
        loop="conf.loop"
        min-width="conf.minWidth"
        expand="conf.expand"
        always-fill="conf.alwaysFill"
        transition-duration="conf.transitionDuration"
        before-slide="conf.beforeSlide"
        after-slide="conf.afterSlide">
        <kaarousel-slide ng-repeat="slide in slides track by $index" >
            <!-- PUT SOME HTML HERE -->
        </kaarousel-slide>
    </kaarousel>

Or you can just pass an option object ( options takes over everything else though and callbacks should always be in attributes ) :

    <kaarousel options="myOptions" before-slide="someFunction" ></kaarousel>

Every boolean attributes are assumed true when empty:

    <kaarousel swipable loop hide-pager>

Options

Default configuration is :

    vm.defaultOptions = {
        displayed: 3,
        perSlide: 1,
        autoplay: true,
        direction: 'horizontal',
        pauseOnHover: true,
        centerActive: false,
        timeInterval: 3000,
        transitionDuration: 500,
        stopAfterAction: false,
        hideNav: false,
        hidePager: false,
        navOnHover: false,
        pagerOnHover: false,
        swipable: true,
        sync: null,
        animation: 'slide',
        loop: true,
        afterSlide: null,
        beforeSlide: null,
        minWidth: null,
        expand: true,
        alwaysFill: true,
        swipeThreshold: 100
    };

Todo

  • add tests
You can’t perform that action at this time.