{"id":13573461,"url":"https://github.com/serenader2014/flutter_carousel_slider","last_synced_at":"2025-05-14T08:09:15.875Z","repository":{"id":37686591,"uuid":"129778064","full_name":"serenader2014/flutter_carousel_slider","owner":"serenader2014","description":"A flutter carousel widget, support infinite scroll, and custom child widget.","archived":false,"fork":false,"pushed_at":"2024-08-19T10:47:28.000Z","size":42650,"stargazers_count":1634,"open_issues_count":223,"forks_count":594,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-04-09T00:30:31.450Z","etag":null,"topics":["autoplay","carousel-slider","flutter","infinite-scroll","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/carousel_slider","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/serenader2014.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-16T17:05:04.000Z","updated_at":"2025-03-31T21:10:35.000Z","dependencies_parsed_at":"2024-08-09T02:08:42.175Z","dependency_job_id":"23b5e628-3e1b-4824-aa65-bece6ac212e0","html_url":"https://github.com/serenader2014/flutter_carousel_slider","commit_stats":{"total_commits":113,"total_committers":40,"mean_commits":2.825,"dds":0.5575221238938053,"last_synced_commit":"36d3f399cb98634d5f5cd30eaff56c34b04c5f40"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serenader2014%2Fflutter_carousel_slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serenader2014%2Fflutter_carousel_slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serenader2014%2Fflutter_carousel_slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serenader2014%2Fflutter_carousel_slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serenader2014","download_url":"https://codeload.github.com/serenader2014/flutter_carousel_slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101558,"owners_count":22014908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autoplay","carousel-slider","flutter","infinite-scroll","widget"],"created_at":"2024-08-01T15:00:36.349Z","updated_at":"2025-05-14T08:09:10.865Z","avatar_url":"https://github.com/serenader2014.png","language":"Dart","funding_links":[],"categories":["组件","Dart","Components","Packages","Image [🔝](#readme)"],"sub_categories":["图片","Image"],"readme":"# carousel_slider\n\nA carousel slider widget.\n\n## Features \n\n* Infinite scroll \n* Custom child widgets\n* Auto play\n\n## Supported platforms\n\n* Flutter Android\n* Flutter iOS\n* Flutter web\n* Flutter desktop\n\n## Live preview\n\nhttps://serenader2014.github.io/flutter_carousel_slider/#/\n\nNote: this page is built with flutter-web. For a better user experience, please use a mobile device to open this link.\n\n## Installation\n\nAdd `carousel_slider: ^5.0.0` to your `pubspec.yaml` dependencies. And import it:\n\n```dart\nimport 'package:carousel_slider/carousel_slider.dart';\n```\n\n## How to use\n\nSimply create a `CarouselSlider` widget, and pass the required params:\n\n```dart\nCarouselSlider(\n  options: CarouselOptions(height: 400.0),\n  items: [1,2,3,4,5].map((i) {\n    return Builder(\n      builder: (BuildContext context) {\n        return Container(\n          width: MediaQuery.of(context).size.width,\n          margin: EdgeInsets.symmetric(horizontal: 5.0),\n          decoration: BoxDecoration(\n            color: Colors.amber\n          ),\n          child: Text('text $i', style: TextStyle(fontSize: 16.0),)\n        );\n      },\n    );\n  }).toList(),\n)\n```\n\n## Params\n\n```dart\n\nCarouselSlider(\n   items: items,\n   options: CarouselOptions(\n      height: 400,\n      aspectRatio: 16/9,\n      viewportFraction: 0.8,\n      initialPage: 0,\n      enableInfiniteScroll: true,\n      reverse: false,\n      autoPlay: true,\n      autoPlayInterval: Duration(seconds: 3),\n      autoPlayAnimationDuration: Duration(milliseconds: 800),\n      autoPlayCurve: Curves.fastOutSlowIn,\n      enlargeCenterPage: true,\n      enlargeFactor: 0.3,\n      onPageChanged: callbackFunction,\n      scrollDirection: Axis.horizontal,\n   )\n )\n```\n\nSince `v2.0.0`, you'll need to pass the options to `CarouselOptions`. For each option's usage you can refer to [carousel_options.dart](./lib/carousel_options.dart).\n\n**If you pass the `height` parameter, the `aspectRatio` parameter will be ignored.**\n\n## Build item widgets on demand\n\nThis method will save memory by building items once it becomes necessary. This way they won't be built if they're not currently meant to be visible on screen.\nIt can be used to build different child item widgets related to content or by item index.\n\n```dart\n\nCarouselSlider.builder(\n  itemCount: 15,\n  itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =\u003e\n    Container(\n      child: Text(itemIndex.toString()),\n    ),\n)\n```\n\n## Carousel controller\n\nIn order to manually control the pageview's position, you can create your own `CarouselSliderController`, and pass it to `CarouselSlider`. Then you can use the `CarouselSliderController` instance to manipulate the position.\n\n```dart \nclass CarouselDemo extends StatelessWidget {\n  CarouselSliderController buttonCarouselController = CarouselSliderController();\n\n @override\n  Widget build(BuildContext context) =\u003e Column(\n    children: \u003cWidget\u003e[\n      CarouselSlider(\n        items: child,\n        carouselController: buttonCarouselController,\n        options: CarouselOptions(\n          autoPlay: false,\n          enlargeCenterPage: true,\n          viewportFraction: 0.9,\n          aspectRatio: 2.0,\n          initialPage: 2,\n        ),\n      ),\n      RaisedButton(\n        onPressed: () =\u003e buttonCarouselController.nextPage(\n            duration: Duration(milliseconds: 300), curve: Curves.linear),\n        child: Text('→'),\n      )\n    ]\n  );\n}\n```\n\n### `CarouselSliderController` methods\n\n#### `.nextPage({Duration duration, Curve curve})`\n\nAnimate to the next page\n\n#### `.previousPage({Duration duration, Curve curve})`\n\nAnimate to the previous page\n\n#### `.jumpToPage(int page)`\n\nJump to the given page.\n\n#### `.animateToPage(int page, {Duration duration, Curve curve})`\n\nAnimate to the given page.\n\n## Screenshot\n\nBasic text carousel demo:\n\n![simple](screenshot/basic.gif)\n\nBasic image carousel demo:\n\n![image](screenshot/image.gif)\n\nA more complicated image carousel slider demo:\n\n![complicated image](screenshot/complicated-image.gif)\n\nFullscreen image carousel slider demo:\n\n![fullscreen](screenshot/fullscreen.gif)\n\nImage carousel slider with custom indicator demo:\n\n![indicator](screenshot/indicator.gif)\n\nCustom `CarouselSliderController` and manually control the pageview position demo:\n\n![manual](screenshot/manually.gif)\n\nVertical carousel slider demo:\n\n![vertical](screenshot/vertical.gif)\n\nSimple on-demand image carousel slider, with image auto prefetch demo:\n\n![prefetch](screenshot/preload.gif)\n\nNo infinite scroll demo:\n\n![noloop](screenshot/noloop.gif)\n\nAll screenshots above can be found at the example project.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserenader2014%2Fflutter_carousel_slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserenader2014%2Fflutter_carousel_slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserenader2014%2Fflutter_carousel_slider/lists"}