3D Coverflow Effect Slider with jQuery Flipster Carousel

Plugin Preview

Share this:

How to start using jQuery?

Download Free 3D Models for Games, AR/VR Projects

Top 100 jQuery Plugins

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

Demo Download

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>
            <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>
            <li data-flip-title="Cerulean Blue" data-flip-category="Blues">
                <img src="img/text5.gif">
            </li>
            <li data-flip-title="Dodger Blue" data-flip-category="Blues">
                <img src="img/text6.gif">
            </li>
            <li data-flip-title="Cyan" data-flip-category="Blues">
                <img src="img/text7.gif">
            </li>
            <li data-flip-title="Robin's Egg" data-flip-category="Blues">
                <img src="img/text8.gif">
            </li>
            <li data-flip-title="Deep Sea" data-flip-category="Greens">
                <img src="img/text9.gif">
            </li>
            <li data-flip-title="Apple" data-flip-category="Greens">
                <img src="img/text10.gif">
            </li>
            <li data-flip-title="Pistachio" data-flip-category="Greens">
                <img src="img/text11.gif">
            </li>
            <li data-flip-title="Pear" data-flip-category="Greens">
                <img src="img/text12.gif">
            </li>
            <li data-flip-title="Bright Sun" data-flip-category="Yellows">
                <img src="img/text13.gif">
            </li>
            <li data-flip-title="Mikado" data-flip-category="Yellows">
                <img src="img/text14.gif">
            </li>
        </ul>
</div>

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

$(document).ready(function(){
$("#carousel").flipster({
        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.

$("#carousel").flipster({
   itemContainer: 'ul',
});

$("#carousel").flipster({
    itemSelector: 'li',
});

$("#carousel").flipster({
   style: 'coverflow',
});

$("#carousel").flipster({
   buttons: true,
});

$("#carousel").flipster({
   buttonNext: "Next",
   buttonPrev: "Previous",
});

$("#carousel").flipster({
   start: 'center',
});

$("#carousel").flipster({
   fadeIn: 500,
});

$("#carousel").flipster({
   loop: true,
});

$("#carousel").flipster({
   autoplay: 3000,
});

$("#carousel").flipster({
     pauseOnHover: true,
});

$("#carousel").flipster({
   click: true,
});

$("#carousel").flipster({
   spacing: -0.6,
});

3D Coverflow Effect Slider Navigation Options

$("#carousel").flipster({
   nav: true,
});

$("#carousel").flipster({
   keyboard: true,
});

$("#carousel").flipster({
   scrollwheel: true,
});

$("#carousel").flipster({
    touch: true,
});

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

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.