Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ramotion/circular-carousel

List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center.
https://github.com/ramotion/circular-carousel

animation ios library material-design swift

Last synced: about 4 hours ago
JSON representation

List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center.

Awesome Lists containing this project

README

        


CAROUSEL

List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center.

___

We specialize in the designing and coding of custom UI for Mobile Apps and Websites.


Stay tuned for the latest updates:


💡🏞 Inspired by Kevin Gautier shot

[![CocoaPods](https://img.shields.io/cocoapods/p/FoldingCell.svg)](https://cocoapods.org/pods/FoldingCell)
[![CocoaPods](https://img.shields.io/cocoapods/v/FoldingCell.svg)](http://cocoapods.org/pods/FoldingCell)
[![Twitter](https://img.shields.io/badge/[email protected]?style=flat)](http://twitter.com/Ramotion)

[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/Ramotion)

## Requirements

- iOS 12.0+
- Xcode 10.2+
- Swift 5.0+

## Installation

Just add the `CircularCarousel` directory to your project.

or use [CocoaPods](https://cocoapods.org) with Podfile:
```ruby
pod 'CircularCarousel'
```

or just drag and drop the `CircularCarousel` directory to your project

## Usage

**1** Create a custom view that will be used as a carousel item. In this tutorial we will just use a blank `UIView`.

**2** Create a view controller or container view that handles datasource and delegate responses for the contained Carousel.

```swift
final class ContainerView : UITableViewCell, CircularCarouselDataSource, CircularCarouselDelegate {

}
```

**2.1** Add a reference to the carousel control and the selection of a delegate and datasource to your Carousel control.
```swift
private weak var _carousel : CircularCarousel!

@IBOutlet var carousel : CircularCarousel! {
set {
_carousel = newValue
_carousel.delegate = self
_carousel.dataSource = self
}

get {
return _carousel
}
}
```

**3** Implement the DataSource and Delegate functions. Some of the key functions are listed below.

**3.1** Datasource

```swift
func numberOfItems(inCarousel carousel: CircularCarousel) -> Int {
return /* Number of carousel items */
}
```

```swift
func carousel(_: CircularCarousel, viewForItemAt indexPath: IndexPath, reuseView view: UIView?) -> UIView {
var view = view as? UIVIew

if view == nil {
view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
}

return view
}
```

```swift
func startingItemIndex(inCarousel carousel: CircularCarousel) -> Int {
return /* Insert starting item index */
}
```

**3.2** Delegate

Select how you want the carousel to operate based on the control variables specified below :
```swift
func carousel(_ carousel: CircularCarousel, valueForOption option: CircularCarouselOption, withDefaultValue defaultValue: CGFloat) -> CGFloat {
switch option {
case .itemWidth:
return /* Select item width for carousel */
/* Insert one of the following handlers :
case spacing
case fadeMin
case fadeMax
case fadeRange
case fadeMinAlpha
case offsetMultiplier
case itemWidth
case scaleMultiplier
case minScale
case maxScale
*/
default:
return defaultValue
}
}
```

Handle the selection of a particular carousel item :
```swift
func carousel(_ carousel: CircularCarousel, didSelectItemAtIndex index: Int) {
/* Handle selection of the selected carousel item */
}
```

Handle will begin scrolling :
```swift
func carousel(_ carousel: CircularCarousel, willBeginScrollingToIndex index: Int) {

}
```

To handle spacing between items depending on their offst from the center :
```swift
func carousel(_ carousel: CircularCarousel, spacingForOffset offset: CGFloat) -> CGFloat {
return /* Based on the offset from center, adjust the spacing of the item */
}
```

That's it, the Carousel is good to go!

## 📄 License

Carousel is released under the MIT license.
See [LICENSE](./LICENSE) for details.

This library is a part of a selection of our best UI open-source projects.

If you use the open-source library in your project, please make sure to credit and backlink to https://www.ramotion.com/

## 📱 Get the Showroom App for iOS to give it a try
Try this UI component and more like this in our iOS app. Contact us if interested.