https://github.com/Geeksltd/Zebble.Carousel

A carousel plugin for Zebble for Xamarin
https://github.com/Geeksltd/Zebble.Carousel

Last synced: 29 days ago
JSON representation

A carousel plugin for Zebble for Xamarin

• Host: GitHub
• URL: https://github.com/Geeksltd/Zebble.Carousel
• Owner: Geeksltd
• License: other
• Created: 2017-07-23T14:18:09.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-07-03T12:02:01.000Z (5 months ago)
• Last Synced: 2024-08-03T23:26:26.581Z (4 months ago)
• Language: C#
• Size: 3.04 MB
• Stars: 3
• Watchers: 6
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-xamarin-forms - Zebble.Carousel ★3

README

        
[logo]: https://raw.githubusercontent.com/Geeksltd/Zebble.Carousel/master/icon.png "Zebble.Carousel"

## Zebble.Carousel

![logo]

Carousel plugin allows the user to swipe from side to side to navigate through views, like a gallery slider.

[![NuGet](https://img.shields.io/nuget/v/Zebble.Carousel.svg?label=NuGet)](https://www.nuget.org/packages/Zebble.Carousel/)




### Setup

* Available on NuGet: [https://www.nuget.org/packages/Zebble.Carousel/](https://www.nuget.org/packages/Zebble.Carousel/)

* Install in your platform client projects.

* Available for iOS, Android and UWP.




### Api Usage

```xml

	

	

	

	...

```

For adding a slide view in code behind to you Carousel use AddSlide(myView) method.

```csharp

MyCarousel.AddSlide(new Canvas());

```

You can style the Carousel-Bullet and it's active state like this:

```css

Carousel-Bullet{ 

	background-color:#eee;

	  &:active{ background-color:#333; 

	  } 

	}

```

#### Dynamic data source

In the above example, you can use a  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:

```xml

	

	   

	

    

```

Code behind:

```csharp

IEnumerable GetSlideFiles()

{

     return Device.IO.Directory("Images/MySlides").GetFiles().Select(x => x.FullName);

}

```




### Properties

| Property     | Type         | Android | iOS | Windows |

| :----------- | :----------- | :------ | :-- | :------ |

| CenterAligned   | bool         | x       | x   | x       |

| SlideWidth   | float?         | x       | x   | x       |

| EnableZooming   | bool         | x       | x   | x       |




### Methods

| Method       | Return Type  | Parameters                          | Android | iOS | Windows |

| :----------- | :----------- | :-----------                        | :------ | :-- | :------ |

| AddSlide        | Task         | View => child | x       | x   | x       |

| Next        | Task         |	bool => animate	| x       | x   | x       |

| Previous   | Task         | bool => animate | x       | x   | x       |

# RecyclerCarousel

Normal 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.

In cases where you have several views all with the same templates, it's much more efficient to use `RecyclerCarousel` which is much much faster.

```html

    

        

        

    

```

In the above example, `Products` is an `IEnumerable` 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` which means you need to use the `@{Item, x=>x.Something}` syntax in your template.