PantherUI Carousel

< Carousel 1 >

PantherUI Carousel

This template is an example of how you can build a web app for desktop and mobile using 3D carousels.

This carousel is 10-sided. You can swipe left or right on the title bars to move between panels.

You can also dynamically add panels.

This template uses responsive design so it will auto adjust the layout for portrait or landscape.

For tablets and desktop screens, it uses a 3-carousel layout, where each carousel can be maximized to use the entire screen by tapping on the icon in the top-right of the title bar.

For smaller handheld screens, this example uses a simple “horizontal scrolling” layout to move between the carousels. For an actual app, you can use a tabbed sidebar to switch carousels.

< 2 >

< 3 >

< 4 >

< 5 >

< 6 >

< 7 >

< 8 >

< 9 >

< 10: The quick brown fox jumps over the lazy dog is an example of a panagram >

< Carousel 2 >

This is 4-sided.

You can programmatically rotate carousels to a specific side:

< 2 >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales consequat lacus, ac lacinia odio ultrices at. Morbi congue volutpat hendrerit. In sit amet risus quis quam consectetur dignissim quis a magna. Nam facilisis lorem sit amet leo posuere consequat eget in sapien. Suspendisse in feugiat lacus. Aenean pretium enim non lectus adipiscing ut facilisis ante dictum. Sed laoreet augue ac felis mattis non egestas sapien vulputate. Aliquam condimentum justo non ipsum tristique commodo. Etiam dolor augue, eleifend vitae molestie id, semper consectetur libero. Nunc id sem odio, sed congue ante. Suspendisse pulvinar scelerisque sem, in porta elit tincidunt eu. Praesent suscipit ultrices nisi, id feugiat lacus mattis dapibus.

Vestibulum at mauris sed lacus pretium euismod. Vivamus fermentum viverra iaculis. Vestibulum facilisis justo nisl, at ultrices sapien. Ut vulputate aliquam libero, vitae faucibus eros ultricies id. Nulla facilisi. Sed vehicula purus vitae tortor vestibulum vel volutpat neque volutpat. Praesent turpis purus, sodales quis cursus vitae, ultrices ut massa. Aenean aliquam pretium libero, eu consequat felis iaculis ut. Phasellus sollicitudin metus vitae nulla tincidunt a rhoncus magna gravida. Suspendisse nec urna orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

< 3 >

< 4 >

< Carousel 3 >

This is a vertical carousel that rotates up/down instead of left/right.

Debug Info:

This is 3-sided.

< 2 >

< 3 >