Flipster Carousel is a jQuery plugin which allows you to create 3D cover flow effect slider. It is a multi-purpose plugin which comes with three built-in styles.
The plugin full responsive and mobile friendly and comes with coverflow, carousel and flat modes styles. It let you create touch-enabled 3D Flipster slider with jQuery.
It comes with awesome functions which allow you to scroll the slider images by using the mouse wheel. It also supports keyboard arrow keys and touches swipe to navigate the carousel items.
jQuery.Flipster Features
Flipsterbase on CSS3 3D transform jQuery plugin which built to replicate the familiar ‘cover flow’ effect. But also support a variety of different styles.
- Responsive: Work well from desktop to mobile and automatically centers and scales to fit the screen size.
- Lightweight: Due to only 5kb gzipped (13kb uncompressed), It’s lightweight with a combination of both Javascript and CSS. The only dependency is jQuery.
- Touch-Enabled: It allows to swipe the images on touch devices and friendly with Scrollwheel, Trackpad and Keyboard arrow keys.
- Flexible: Flip an image gallery or any HTML content. Links and dynamic content work great!
- Customizable: Four built-in styles (overflow, carousel, wheel, and flat) with plenty of options to configure Flipster the way you want.
How to use:
Include Flipster’s CSS, typically in the <head>
:
<link rel="stylesheet" href="css/flipster.min.css">
Include Flipster’s Javascript after jQuery (ideally at the bottom of the page before the </body>
tag.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="dist/jquery.flipster.min.js"></script>
Next, Let’s create the markup structure for coverflow slider as follows and add your image links in it.
<div id="coverflow"> <ul class="flip-items"> <li data-flip-title="Red"> <img src="img/text1.gif"> </li> <li data-flip-title="Razzmatazz" data-flip-category="Purples"> <img src="img/text2.gif"> </li> <li data-flip-title="Deep Lilac" data-flip-category="Purples"> <img src="img/text3.gif"> </li> <li data-flip-title="Daisy Bush" data-flip-category="Purples"> <img src="img/text4.gif"> </li> </ul> </div>
Finally, initialize the plugin by calling the following syntax/settings.
<script> var coverflow = $("#coverflow").flipster(); </script>
Advanced Configuration Options for Flipster Slider
The following are some advanced configuration options to create a coverflow carousel slider.
Option | Description, Default, Type |
---|---|
itemContainer | It defines the selector for the container of flippin’ items. Default: ‘ul’, Type: String | Object.$("#carousel").flipster({ itemContainer: 'ul', }); |
itemSelector | Selector for children of ‘itemContainer’ to flip. Default: ‘li’, Type: String | Object.$("#carousel").flipster({ itemSelector: 'li', }); |
style | Define the style mode for Flipster. Default: ‘coverflow’, Type: String. Available options are: coverflow | carousel | flat $("#carousel").flipster({ style: 'coverflow', }); |
buttons | Decide whether to insert SVG arrows based next and previous buttons. Default: false, Type: Boolean.$("#carousel").flipster({ buttons: true, }); |
buttonNext & buttonPrev | Define the text for next and previous buttons. Default: ‘Next’ and ‘Previous’ respectively. Type: String.$("#carousel").flipster({ buttonNext: "Next", buttonPrev: "Previous", }); |
start | Define the zero-based index of the starting item. Use ‘center’ to start from the middle. Default: ‘center’, Type: Number.$("#carousel").flipster({ start: 'center', }); |
fadeIn | Define the transition speed in milliseconds for sliding items. Default: 400, Type: Number.$("#carousel").flipster({ fadeIn: 500, }); |
loop | Decide whether to start again sliding items after reaching at the end. Default: false, Type: Boolean.$("#carousel").flipster({ loop: true, }); |
autoplay | This option is useful to set autoplay functionality in the carousel. Default: false, Type: Boolean | Number. Pass the number value as milliseconds as an interval of autoplay. $("#carousel").flipster({ autoplay: 3000, }); |
pauseOnHover | Decide whether to pause the sliding items on mouse over (hover) the Flipster Carousel. Default: true, Type: Boolean.$("#carousel").flipster({ pauseOnHover: true, }); |
click | Switch to the clicked item in Flipster Carousel. Default: true, Type: Boolean.$("#carousel").flipster({ click: true, }); |
spacing | Space between items relative to each item’s width. Default: -0.6, Type: Number. Available options are: number | 0 for no spacing | negative values to overlap $("#carousel").flipster({ spacing: -0.6, }); |
3D Coverflow Effect Slider Navigation Options
nav | Decide to insert the navigation before the Flipster items. Default: false, Type: Boolean.$("#carousel").flipster({ nav: true, }); |
keyboard | Allow/disallow keyboard arrow keys navigation for Flipster items. Default: true, Type: Boolean.$("#carousel").flipster({ keyboard: true, }); |
scrollwheel | Decide whether to enable/disable Flipster navigation on the mouse wheel. Default: true, Type: Boolean.$("#carousel").flipster({ scrollwheel: true, }); |
touch | Enable/disable swipe navigation on touch devices. Default: true, Type: Boolean.$("#carousel").flipster({ touch: true, }); |
onItemSwitch | Trigger the custom function on item switch. Default: false, Type: function. Arguments received: [currentItem, previousItem] $("#carousel").flipster({ onItemSwitch: function{ // Code to execute } }); |