3D Coverflow Effect Slider with jQuery Flipster Carousel

Flipster is a multi purpose jQuery plugin that comes with 3 built in (coverflow | carousel | flat) modes / styles. It lets you to create touch-enabled 3D coverflow effect slider with jQuery Flipster plugin. It supports mouse wheel scrolling, keyboard arrow keys and touch swipe to navigate the carousel items.

Plugin Overview

Plugin: Flipster
Author: Adrien Delessert
Licence: MIT Licence
Published: January 17, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 46.7 KB

How to Make 3D Coverflow Effect Slider

1. Load the jQuery and Flipster Slider‘s CSS & JavaScript files into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Flipster CSS -->
<link rel="stylesheet" href="dist/jquery.flipster.min.css">

<!-- Flipster Js -->
<script src="dist/jquery.flipster.min.js"></script>

2. Create markup structure for coverflow slider as follows and add your image links in it.

<div id="carousel">
        <ul class="flip-items">
            <li data-flip-title="Red">
                <img src="img/text1.gif">
            <li data-flip-title="Razzmatazz" data-flip-category="Purples">
                <img src="img/text2.gif">
            <li data-flip-title="Deep Lilac" data-flip-category="Purples">
                <img src="img/text3.gif">
            <li data-flip-title="Daisy Bush" data-flip-category="Purples">
                <img src="img/text4.gif">
            <li data-flip-title="Cerulean Blue" data-flip-category="Blues">
                <img src="img/text5.gif">
            <li data-flip-title="Dodger Blue" data-flip-category="Blues">
                <img src="img/text6.gif">
            <li data-flip-title="Cyan" data-flip-category="Blues">
                <img src="img/text7.gif">
            <li data-flip-title="Robin's Egg" data-flip-category="Blues">
                <img src="img/text8.gif">
            <li data-flip-title="Deep Sea" data-flip-category="Greens">
                <img src="img/text9.gif">
            <li data-flip-title="Apple" data-flip-category="Greens">
                <img src="img/text10.gif">
            <li data-flip-title="Pistachio" data-flip-category="Greens">
                <img src="img/text11.gif">
            <li data-flip-title="Pear" data-flip-category="Greens">
                <img src="img/text12.gif">
            <li data-flip-title="Bright Sun" data-flip-category="Yellows">
                <img src="img/text13.gif">
            <li data-flip-title="Mikado" data-flip-category="Yellows">
                <img src="img/text14.gif">

3. Finally, call the plugin in jQuery document ready function with the following syntax / settings.

        style: 'carousel',
        spacing: -0.5,
        nav: true,
        buttons:   true,

Advance Configuration Options for Flipster Slider

The following are some advance configuration options to create coverflow carousel slider.

Option Description, Default, Type

It define the selector for the container of flippin’ items. Default: ‘ul’, Type: String | Object.

   itemContainer: 'ul',

Selector for children of ‘itemContainer’ to flip. Default: ‘li’, Type: String | Oject.

    itemSelector: 'li',

Define the style mode for Flipster. Default: ‘coverflow’, Type: String.
Available options are: coverflow | carousel | flat

   style: 'coverflow',

Decide weather to insert SVG arrows based next and previous buttons. Default: false, Type: Boolean.

   buttons: true,
buttonNext & buttonPrev

Define the text for next and previous buttons. Default: ‘Next’ and ‘Previous’ respectively. Type: String.

   buttonNext: "Next",
   buttonPrev: "Previous",

Define the zero based index of the starting item. Use ‘center’ to start from the middle. Default: ‘center’, Type: Number.

   start: 'center',

Define the transition speed in milliseconds for sliding items. Default: 400, Type: Number.

   fadeIn: 500,

Decide weather to start again sliding items after reaching at end. Default: false, Type: Boolean.

   loop: true,

This option is useful to set auto play functionality in carousel. Default: false, Type: Boolean | Number.
Pass the number value as milliseconds as interval of auto play.

   autoplay: 3000,

Decide weather to pause the sliding items on mouse over (hover) the Flipster Carousel. Default: true, Type: Boolean.

     pauseOnHover: true,

Switch to clicked item in Flipster Carousel. Default: true, Type: Boolean.

   click: true,

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

   spacing: -0.6,

3D Coverflow Effect Slider Navigation Options


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

   nav: true,

Allow / dissallow keyboard arrow keys navigation for Flipster items. Default: true, Type: Boolean.

   keyboard: true,

Decide weather to enable / disable Flipster navigation on mouse wheel. Default: true, Type: Boolean.

   scrollwheel: true,

Enable / disable swipe navigation on touch devices. Default: true, Type: Boolean.

    touch: true,

Trigger the custom function on item switch. Default: false, Type: function.
Arguments received: [currentItem, previousItem]

    onItemSwitch: function{
	   // Code to execute 

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link