• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

revolunet/angular-carousel: Mobile friendly AngularJS carousel

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

revolunet/angular-carousel

开源软件地址(OpenSource Url):

https://github.com/revolunet/angular-carousel

开源编程语言(OpenSource Language):

JavaScript 79.1%

开源软件介绍(OpenSource Introduction):

AngularJS Touch Carousel

An AngularJS 1 carousel implementation optimised for mobile devices.

This project is not maintained anymore, and looking for maintainers.

Demo : http://revolunet.github.io/angular-carousel

Comments and contributions welcome :)

Proudly brought to you by the @revolunet team.

Install :

Bower

bower install angular-carousel

npm

npm install angular-carousel

If you don't use NPM or Bower, just download files from the github repo

Usage :

  • Add angular-touch.js and angular-carousel.js to your code:
<script src="angular.js"></script>
<script src="angular-touch.js"></script>
<script src="angular-carousel.js"></script>
  • Or just require the module the CommonJS way (if you use npm)
var angular = require('angular');
var ngTouch = require('angular-touch');
var carousel  = require('angular-carousel');
  • Add angular-carousel.css to your code:
<link href="angular-carousel.css" rel="stylesheet" type="text/css" />
  • Add a dependency to the angular-carousel module in your application.
angular.module('MyApp', ['angular-carousel']);
  • Add a rn-carousel attribute to your <ul> block and your <li>'s become magically swipable ;)
<ul rn-carousel class="image">
  <li ng-repeat="image in sportImages">
    <div class="layer">{{ image }}</div>
  </li>
</ul>
  • You can also use rn-carousel without ng-repeat ;)
<ul rn-carousel class="image">
  <li>slide #1</li>
  <li>slide #2</li>
  <li>slide #3</li>
</ul>

Directive options :

  • rn-carousel-index two way binding integer to control the carousel position (0-indexed)
  • rn-rn-carousel-html-slides: two way binding array to get slides if no ng-repeat was used (slides array)
  • rn-carousel-buffered add this attribute to enable the carousel buffering, good to minimize the DOM (5 slides)
  • rn-carousel-controls add this attribute to enable builtin prev/next buttons (you can override by CSS)
  • rn-carousel-auto-slide add this attribute to make the carousel slide automatically after given seconds (default=3)
  • rn-carousel-transition : transition type, can be one of slide, zoom, hexagon, fadeAndSlide, none. (default=slide)
  • rn-carousel-locked: two way binding boolean that lock/unlock the carousel
  • rn-carousel-deep-watch: Deep watch the collection which enable to dynamically add slides at beginning without corrupting position
  • rn-carousel-easing: add this attritube to specify a formula for easing, these can be found in the shifty library (default=easeIn)
  • rn-carousel-duration: add this attribute to set the duration of the transition (default=300)
  • rn-carousel-controls-allow-loop: add this attribute to allow looping through slides from prev/next controls

Indicators

You can add position indicators by adding this directive where you want :

<div rn-carousel-indicators ng-if="slides.length > 1" slides="slides" rn-carousel-index="carouselIndex"></div>
  • slides is the same collection you use in the carousel ng-repeat

Note: If loading in slides from an async service, the ng-if="slides.length > 1" may not update as expected. In this case, try ng-if="slides".

  • carouselIndex is the same index you've defined for the carousel

Note: If the indicators don't seem to update with the slides, try binding to an object param i.e. carousel.index, set in the controller like $scope.carousel.index = 0 Explanation.

Notes :

  • if you use IE<=9, iOS<7 or Android<4 please include the requestAnimationFrame polyfill in your application.
  • if you use IE<=8 include the es5-shim polyfill in your application.
  • don't set any style attribute to your li's. they would be overwritten by the carousel (use classes instead).
  • angular-carousel use the great shifty.js for the animations

Todo :

  • delay autoslide on indicators click/move
  • customisable transitions
  • more transition types
  • infinite loop support

Contributing

Inspirations

License

As AngularJS itself, this module is released under the permissive MIT license. Your contributions are always welcome.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
googleads/googleads-mobile-ios-examples: googleads-mobile-ios发布时间:2022-08-29
下一篇:
didi/booster: 发布时间:2022-08-29
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap