Custom WordPress Slider – Coverflow

I got a request from a client to replicate a certain slider and its functionality from a Joomla! website. Found out that the slider is a Coverflow Slider and upon looking on WordPress Plugin Repository I can't find a good one that will work based on the requested functionalities. So I decided to create a custom Coverflow Slider.

The custom slider was built using: Toolset plugin for the Custom Post Type, Bootstrap (for the video modal) and jQuery.Flipster (for the coverflow effect).

Let's segregate the process in to 5 steps:

First, Install Toolset and create 2 New post types. Yes, 2 post types because we are going to have it in parent-child relationship to have a Repeating group field in the Parent Custom post type.

Here's the link for the toolset documentation on setting up the repeatable group field using:

Parent Post Type

Child Post Type

Second, Create the Custom Post fields for our custom post type. I needed four fields to comply with the needed functionality.
1. Image Field - For the background of the slider image.
2. Multiple Lines Fields - for the content of the Lightbox (Bootstrap Modal)
3. Single Line Field - For the Name in the Slider
4. Multiple Lines Fields - for the description in the slider

Post Fields

Slider Post

Third, we now need to add the libraries of jQuery.Flipster and Bootstrap to the theme.

Just add a new folder in your child theme for JS and CSS then add the needed files, here are the links.
Flipster: CSS and JS
Bootstrap: CSS and JS

After adding these files into your (Child) theme files, add this code to your functions.php files.

function flipster_js() {
    wp_enqueue_script( 'flipster_js', get_stylesheet_directory_uri() . '/js/jquery.flipster.min.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'bootstrap_js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.7', true );

add_action('wp_enqueue_scripts', 'flipster_js');

function flipster_css() {
    wp_enqueue_style( 'flipster_css', get_stylesheet_directory_uri() . '/css/jquery.flipster.min.css', true );
    wp_enqueue_style( 'bootstrap_css', get_stylesheet_directory_uri() . '/css/bootstrap.min.css', true);

add_action('wp_enqueue_scripts', 'flipster_css');

Fourth, we need to create the shortcode so we can add the slider anywhere in the website. I have created a pastebin for the Shortcode:

Here's also the link to Toolset documentation on how to show the custom fields created thru php which we used in the shortcode:

jQuery to be added in the footer.php

    itemContainer: 'ul',
    // [string|object]
    // Selector for the container of the flippin' items.

    itemSelector: 'li',
    // [string|object]
    // Selector for children of `itemContainer` to flip

    start: 'center',
    // ['center'|number]
    // Zero based index of the starting item, or use 'center' to start in the middle

    fadeIn: 400,
    // [milliseconds]
    // Speed of the fade in animation after items have been setup

    loop: false,
    // [true|false]
    // Loop around when the start or end is reached

    autoplay: false,
    // [false|milliseconds]
    // If a positive number, Flipster will automatically advance to next item after that number of milliseconds

    pauseOnHover: true,
    // [true|false]
    // If true, autoplay advancement will pause when Flipster is hovered

    style: 'coverflow',
    // [coverflow|carousel|flat|...]
    // Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles
    // Create your own theme in CSS and use this setting to have Flipster add the custom class

    spacing: -0.7,
    // [number]
    // Space between items relative to each item's width. 0 for no spacing, negative values to overlap

    click: true,
    // [true|false]
    // Clicking an item switches to that item

    keyboard: true,
    // [true|false]
    // Enable left/right arrow navigation

    scrollwheel: true,
    // [true|false]
    // Enable mousewheel/trackpad navigation; up/left = previous, down/right = next

    touch: true,
    // [true|false]
    // Enable swipe navigation for touch devices

    nav: 'after',
    // [true|false|'before'|'after']
    // If not false, Flipster will build an unordered list of the items
    // Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items

    buttons: false,
    // [true|false|'custom']
    // If true, Flipster will insert Previous / Next buttons with SVG arrows
    // If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`

    buttonPrev: 'Previous',
    // [text|html]
    // Changes the text for the Previous button

    buttonNext: 'Next',
    // [text|html]
    // Changes the text for the Next button

    onItemSwitch: false
    // [function]
    // Callback function when items are switched
    // Arguments received: [currentItem, previousItem]


.modal {
  text-align: center;
  padding: 0!important;

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;

#coverflow-flipster img{max-width: 700px !important; width: 100% !important;}
.flipster__item{float: none !important;}

.flipster__item--current .togglediv{
	position: absolute;
	width: 100%;
	height: 100%;

.flipdetails{opacity: 0;}

.flipster__item--current .flipname,
.flipster__item--current .flipdetails{opacity: 1 !important;}

.flipname{font-size: 20px; text-transform: uppercase;}
.flipdetails{color: #aaa;}

    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    color: #fff;
    background: url('	images/textGradient.png') 0 -5px;
    padding-bottom: 10px;
.flipnamedetails p{margin-bottom: 0;}

Working Demo

Leave a Comment