Skip to content
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/swift-ui-animation-components-and-libraries
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Demo Cleaned up images May 22, 2019
Framework Added the readme text updates May 14, 2019
Screenshots New tutorial images May 14, 2019
.gitignore Initial commit Dec 21, 2018
.travis.yml Added pod specifications May 14, 2019
CircularCarousel.podspec Updated podspec May 22, 2019
LICENSE Added MIT license Jan 10, 2019
README.md Update README.md Jun 5, 2019
header.png Fixed swipe scroll clamping in wrap. Added transparent first cell to … Jan 15, 2019

README.md

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 CocoaPods Twitter

Donate

Requirements

  • iOS 12.0+
  • Xcode 10.2+
  • Swift 5.0+

Installation

Just add the CircularCarousel directory to your project.

or use CocoaPods with Podfile:

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.

	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.

	private weak var _carousel : CircularCarousel!
    @IBOutlet var carousel : CircularCarousel! {
        set {
            _carousel = newValue
            _carousel.delegate = self
            _carousel.dataSource = self
        }
        
        get {
            return _carousel
        }
    }
  1. Implement the DataSource and Delegate functions. Some of the key functions are listed below.

3.1) Datasource

	func numberOfItems(inCarousel carousel: CircularCarousel) -> Int {
        return /* Number of carousel items */
    }
	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
    }
	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 :

	func carousel<CGFloat>(_ 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 :

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

Handle will begin scrolling :

	func carousel(_ carousel: CircularCarousel, willBeginScrollingToIndex index: Int) {

	}

To handle spacing between items depending on their offst from the center :

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

You can’t perform that action at this time.