Build 3D Coverflow Effect Slider with jQuery – Flipster Carousel

Category: Slideshow | May 24, 2019
Author: drien
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

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.

OptionDescription, Default, Type
itemContainerIt defines the selector for the container of flippin’ items. Default: ‘ul’, Type: String | Object.

$("#carousel").flipster({
   itemContainer: 'ul',
});
itemSelectorSelector for children of ‘itemContainer’ to flip. Default: ‘li’, Type: String | Object.

$("#carousel").flipster({
    itemSelector: 'li',
});
styleDefine the style mode for Flipster. Default: ‘coverflow’, Type: String.
Available options are: coverflow | carousel | flat

$("#carousel").flipster({
   style: 'coverflow',
});
buttonsDecide whether to insert SVG arrows based next and previous buttons. Default: false, Type: Boolean.

$("#carousel").flipster({
   buttons: true,
});
buttonNext & buttonPrevDefine the text for next and previous buttons. Default: ‘Next’ and ‘Previous’ respectively. Type: String.

$("#carousel").flipster({
   buttonNext: "Next",
   buttonPrev: "Previous",
});
startDefine the zero-based index of the starting item. Use ‘center’ to start from the middle. Default: ‘center’, Type: Number.

$("#carousel").flipster({
   start: 'center',
});
fadeInDefine the transition speed in milliseconds for sliding items. Default: 400, Type: Number.

$("#carousel").flipster({
   fadeIn: 500,
});
loopDecide whether to start again sliding items after reaching at the end. Default: false, Type: Boolean.

$("#carousel").flipster({
   loop: true,
});
autoplayThis 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,
});
pauseOnHoverDecide whether to pause the sliding items on mouse over (hover) the Flipster Carousel. Default: true, Type: Boolean.

$("#carousel").flipster({
     pauseOnHover: true,
});
clickSwitch to the clicked item in Flipster Carousel. Default: true, Type: Boolean.

$("#carousel").flipster({
   click: true,
});
spacingSpace 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

navDecide to insert the navigation before the Flipster items. Default: false, Type: Boolean.

$("#carousel").flipster({
   nav: true,
});
keyboardAllow/disallow keyboard arrow keys navigation for Flipster items. Default: true, Type: Boolean.

$("#carousel").flipster({
   keyboard: true,
});
scrollwheelDecide whether to enable/disable Flipster navigation on the mouse wheel. Default: true, Type: Boolean.

$("#carousel").flipster({
   scrollwheel: true,
});
touchEnable/disable swipe navigation on touch devices. Default: true, Type: Boolean.

$("#carousel").flipster({
    touch: true,
});
onItemSwitchTrigger the custom function on item switch. Default: false, Type: function.
Arguments received: [currentItem, previousItem]

$("#carousel").flipster({
    onItemSwitch: function{
	   // Code to execute 
	}
});