< PantherUI >

About:

The PantherUI Carousel is a 3D layout pattern for most modern browsers.

You can swipe left or right on the title bars to switch panels.

These templates use responsive design to auto-adjust the layout for desktop or mobile, and portrait or landscape.

This template was tested on:

Desktop Browsers:

  • Google Chrome 27 - 33
  • Safari 6
  • Firefox 21 - 27
  • Opera Next 15 - 19

Tablets:

  • BlackBerry PlayBook OS 2.1
  • iOS 5.1 - 7.0 (iPad)
  • Android 4.1 (Galaxy Tab 2 7.0)
  • Android 4.3 (Nexus 7)

Smartphones:

  • BlackBerry 10.1 - 10.2 (Z30, Z10 and Q10)
  • BlackBerry OS 7.1 (Bold 9900)
  • iOS 5.0 (iPod Touch)

Known issues:

On iOS devices, you need to use the “two-finger” scroll gesture for scrolling overflow content because of the “rubber band” bounce effect with vertical scrolling.

For PhoneGap apps built for iOS, you can disable the bounce in the config.xml:


<preference name="DisallowOverscroll" value="true" />
<preference name="webviewbounce" value="false" />
                            
< 2 >

Basics (ABCs):

  • 1A - Apply 1-Carousel
  • 1B - Backgrounds and Buttons
  • 1C - Callback
  • 1D - Direction
  • 1E - Easing
  • 1F - For 1-Handed Thumb Use
  • 1H - Hash:  #1  #2  #3  #4
  • 1K - Keyboard Support
  • 1T - Theming: Flat  Gradient  Dark 
  • 2A - Apply 2-Carousel
< 3 >

Use Cases:

  • 3-Carousel App - with dynamic panels and maximize buttons
  • Ticker
  • Thumbnail Grid - with a bottom navigation bar
  • Slideshow
< Credits >

PantherUI Carousel

by Jim Ing

Fork me on GitHub

Thanks to the following for their support and feedback:

  • John Mutter
  • Brent Thornton
  • Seb Barthelmess
  • Ed Bourne
  • HyunJun Jung
  • Jeff Bentley
  • Wayne Pau
  • Dave DeSandro

Copyright © 2013 - 2014