{"id":13713177,"url":"https://github.com/Geeksltd/Zebble.Carousel","last_synced_at":"2025-05-06T23:30:45.313Z","repository":{"id":90728371,"uuid":"98102701","full_name":"Geeksltd/Zebble.Carousel","owner":"Geeksltd","description":"A carousel plugin for Zebble for Xamarin","archived":false,"fork":false,"pushed_at":"2024-09-23T16:19:33.000Z","size":3188,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-13T23:33:15.627Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Geeksltd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-07-23T14:18:09.000Z","updated_at":"2024-09-23T16:19:38.000Z","dependencies_parsed_at":"2024-03-04T18:16:42.769Z","dependency_job_id":"18a60f80-5860-43a5-a435-b784d3cc25e4","html_url":"https://github.com/Geeksltd/Zebble.Carousel","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geeksltd%2FZebble.Carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geeksltd%2FZebble.Carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geeksltd%2FZebble.Carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geeksltd%2FZebble.Carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Geeksltd","download_url":"https://codeload.github.com/Geeksltd/Zebble.Carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252787180,"owners_count":21804211,"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":[],"created_at":"2024-08-02T23:01:29.040Z","updated_at":"2025-05-06T23:30:45.000Z","avatar_url":"https://github.com/Geeksltd.png","language":"C#","funding_links":[],"categories":["UI"],"sub_categories":[],"readme":"[logo]: https://raw.githubusercontent.com/Geeksltd/Zebble.Carousel/master/icon.png \"Zebble.Carousel\"\n\n\n## Zebble.Carousel\n\n![logo]\n\nCarousel plugin allows the user to swipe from side to side to navigate through views, like a gallery slider.\n\n\n[![NuGet](https://img.shields.io/nuget/v/Zebble.Carousel.svg?label=NuGet)](https://www.nuget.org/packages/Zebble.Carousel/)\n\n\u003cbr\u003e\n\n\n### Setup\n* Available on NuGet: [https://www.nuget.org/packages/Zebble.Carousel/](https://www.nuget.org/packages/Zebble.Carousel/)\n* Install in your platform client projects.\n* Available for iOS, Android and UWP.\n\n\u003cbr\u003e\n\n\n### Api Usage\n\n\n```xml\n\u003cCarousel Id=\"MyCarousel\"\u003e\n\t\u003cImageView Path=\"..../Slide1.png\" /\u003e\n\t\u003cImageView Path=\"..../Slide2.png\" /\u003e\n\t\u003cImageView Path=\"..../Slide3.png\" /\u003e\n\t...\n\u003c/Carousel\u003e\n```\n\nFor adding a slide view in code behind to you Carousel use AddSlide(myView) method.\n\n```csharp\nMyCarousel.AddSlide(new Canvas());\n```\n\nYou can style the Carousel-Bullet and it's active state like this:\n\n```css\nCarousel-Bullet{ \n\tbackground-color:#eee;\n\t  \u0026:active{ background-color:#333; \n\t  } \n\t}\n```\n\n#### Dynamic data source\n\nIn the above example, you can use a \u003cz-foreach\u003e loop to dynamically create slides from a data source. For instance, the following code will show a slide for each image file inside the MySlides folder in the application resources:\n\n```xml\n\u003cCarousel Id=\"MyCarousel\"\u003e\n\t\u003cz-foreach var=\"file\" in=\"@GetSlideFiles()\"\u003e\n\t   \u003cImageView Path=\"@file\" /\u003e\n\t\u003c/z-foreach\u003e\n    \u003cAnyOtherView /\u003e\n\u003c/Carousel\u003e\n```\nCode behind:\n\n```csharp\nIEnumerable\u003cstring\u003e GetSlideFiles()\n{\n     return Device.IO.Directory(\"Images/MySlides\").GetFiles().Select(x =\u003e x.FullName);\n}\n```\n\n\u003cbr\u003e\n\n\n### Properties\n| Property     | Type         | Android | iOS | Windows |\n| :----------- | :----------- | :------ | :-- | :------ |\n| CenterAligned   | bool         | x       | x   | x       |\n| SlideWidth   | float?         | x       | x   | x       |\n| EnableZooming   | bool         | x       | x   | x       |\n\n\n\u003cbr\u003e\n\n\n### Methods\n| Method       | Return Type  | Parameters                          | Android | iOS | Windows |\n| :----------- | :----------- | :-----------                        | :------ | :-- | :------ |\n| AddSlide        | Task\u003cSlide\u003e         | View =\u003e child | x       | x   | x       |\n| Next        | Task         |\tbool =\u003e animate\t| x       | x   | x       |\n| Previous   | Task         | bool =\u003e animate | x       | x   | x       |\n\n# RecyclerCarousel\nNormal carousel is very flexible. Each slide can be any view object. But it requires all slides to be pre-rendered, which is not efficient if you have many.\n\nIn cases where you have several views all with the same templates, it's much more efficient to use `RecyclerCarousel` which is much much faster.\n\n```html\n\u003cRecyclerCarousel z-of=\"Product, SlideTemplate\" DataSource=\"@Products\"\u003e\n    \u003cz-Component z-type=\"SlideTemplate\" z-base=\"RecyclerCarouselSlide[Product]\"\u003e\n        \u003cImageView Path=\"@{Item, x=\u003ex?.Thumbnail}\" /\u003e\n        \u003cTextView  Text=\"@{Item, x=\u003ex?.Name}\"/\u003e\n    \u003c/z-Component\u003e\n\u003c/RecyclerCarousel\u003e\n```\n\nIn the above example, `Products` is an `IEnumerable\u003cProduct\u003e` which is the data source from which to populate the slides. For example you may have 10 product instances in an array. The carousel will always render a maximum of 3 items. As you swipe through the slides, it will reuse the slide ui objects and just change their X position and also update the data source which is the `Item` property. Please note that `Item` is a `Bindable\u003cProduct\u003e` which means you need to use the `@{Item, x=\u003ex.Something}` syntax in your template.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeeksltd%2FZebble.Carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGeeksltd%2FZebble.Carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeeksltd%2FZebble.Carousel/lists"}