Latest 1.0.0
License MIT
Platforms ios 8.0, requires ARC


A simple circular banner and easy to use in project. You would use your custom views in banner by a few lines of code.

![style](./2015-11-02 14_25_19.gif)

Adding circular banner to your project


Cocoapods is the recommended way to add this custom banner to your project.

  1. Add a pod entry for circular banner to you pod file pod "JSCircularBanner"
  2. Install the pod(s) by running pod install in Terminal


  1. Only support iOS 8.0 and latest.
  2. Source code uses swift


This banner could be created by

init(frame: CGRect, duration: NSTimeInterval)

to set the banner’s frame and its animation duration or use storyboard.

Then you need to created your custom views for your project. In the demo, created five simple views like

for var i = 0; i < 5; i++ {
    let view = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.mainScreen().bounds.width, height: 128))
    view.backgroundColor = UIColor(red: CGFloat(Double(arc4random()%255 + 1) / 255.0), green: CGFloat(Double(arc4random()%255 + 1) / 255.0), blue: CGFloat(Double(arc4random()%255 + 1) / 255.0), alpha: 1)
    let label = UILabel(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 30)) =
    label.text = "Page (i)"

Then, configure your banner by the views you created and the total pages count

self.circularBannerView.fetchContentViewAtIndex = {
        (pageIndex: Int) -> UIView in
        return views[pageIndex]
self.circularBannerView.totalPagesCount = views.count

When tapped the banner’s subviews, could use tapActionClosure get the index of view

self.circularBannerView.tapActionClosure = {
        (pageIndex: Int) -> Void in
    print("tap index is (pageIndex)")

JSCircularBanner don’t have PageViewController, if your project need PageViewController you need to compliance JSCircularBannerDelegate. The method in this protocol you will get the current page index to set the custom PageViewController

func setPageViewIndex(index: Int) {
    print("current (index)")

Use self.circularBannerView.duration to set the animation duration.


This code is distributed under the terms and conditions of the MIT license

Latest podspec

    "name": "JSCircularBanner",
    "version": "1.0.0",
    "summary": "A simple circular banner and easy to use in project",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "authors": {
        "Jerry Shi": "[email protected]"
    "platforms": {
        "ios": "8.0"
    "source": {
        "git": "",
        "tag": "1.0.0"
    "source_files": "JSCircularBanner/JSCircularBanner/*.{swift}",
    "requires_arc": true

Pin It on Pinterest

Share This