This article documents the blocksy_flexy() helper function from Blocksy that is used to output a fully functional slider with:

1. Drag and drop functionality
2. Pills
3. Arrows
4. Native images lazy load
5. Flexible configuration with CSS
6. No JavaScript knowledge needed to implement the slider
7. Very basic functionality that can be easily built upon. Blocksy uses this in the Single Product view and in the Product Reviews extension with great success

Note: The slider implementation requires some knowledge of PHP and CSS. Things may break with future updates as the things are constantly being changed in Blocksy.

Introduction

In the article we’ll document the blocksy_flexy() helper function but we’ll use a shortcode implementation just to test out the underlying calling of the functionality. The required setup:

1. A child theme with a functions.php file
2. A style.css that is correctly loaded in the child theme as described here
3. Some images uploaded in media and their IDs
4. An empty page with the shortcode block inserted. We’ll call this shortcode [flexy_slider]
5. Enqueue the ct-flexy-styles stylesheet. By default, it is not always loaded by Blocksy so it needs to be loaded manually

Basic Example

To get things started as quickly as possible, we’ll introduce the flexy_slider shortcode that outputs 3 images (IDs: 3408, 3414 and 3398 in my case).

add_shortcode('flexy_slider', function () {
    ob_start();

    blocksy_flexy([
        'images' => [3408, 3414, 3398],
        'images_ratio' => '2/1'
    ]);

    return ob_get_clean();
});

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style('ct-flexy-styles');
});

This already gives a great result. The 3 images are displayed in a nice slider with drag-n-drop, pills and arrows that you can click.

Accepted arguments

1. images – an array of attachment IDs
   • Example: [1, 2, 3]
   • Default value: []
2. has_pills – Enable/disable pills
   • Possible values: true, false
   • Default value: true
3. has_arrows – Enable/disable arrows
   • Possible values: true, false
   • Default value: true
4. images_ratio – Define the ratio that will be used for the images
   • Possible values: 2/1, 1/2, 1/1, 3/4, 4/3, 9/16, 16/9, original
   • Default value: 3/4
5. size – Define the image size.
   • Possible values: small, medium, large, full or any other image size you defined.
   • Default value: medium
6. class – Add a CSS class to the container of the slider (the .flexy-container element)
7. autoplay – Implement autoplay for slider, pass a number in seconds or false to disable autoplay. Since 1.7.69
   • Example: 1
   • Default value: false

Controlling the amount of images per page

Now, this is all great but you might want to display more than one image per slide. This is where things get a little tricky and you might need some CSS knowledge. We deferred all of this logic into CSS for a couple of reasons:

1. To not increase the HTML size by adding more attributes that define the way the images size
2. So that the images get positioned correctly while the JavaScript is not loaded. This way we avoid any CLS problems. Flexy was designed with this in mind — absolutely no jumps happen when the slider is initialised

First of all, you might want to define a class for your slider using the class argument so that your custom CSS doesn’t affect other sliders from Blocksy. Just add this element to the args that are passed into blocksy_flexy().

add_shortcode('flexy_slider', function () {
    ob_start();

    blocksy_flexy([
        'images' => [3408, 3414, 3398, 3408, 3414, 3398, 3414],
        'images_ratio' => '2/1',
        'class' => 'three-images-per-page'
    ]);

    return ob_get_clean();
});

Now that our slider has the three-images-per-page class, we can safely make changes to it. Add this CSS into your style.css file to get 3 images per page:

.three-images-per-page .flexy-items > * {
	flex: 0 0 33.333%;
	max-width: 33.333%;
}

Yes, it’s that simple. You only need to define the width of the slide and Flexy will take care of it. You can even define the width in a @media query and Flexy will correctly update everything. No JavaScript changes needed, it just magically the changes.

We’ll polish the CSS slightly to add some spacing in the slider:

.three-images-per-page .flexy-items {
	margin-left: -5px;
	margin-right: -5px;
}

.three-images-per-page .flexy-items > * {
	flex: 0 0 33.333%;
	max-width: 33.333%;

	padding-left: 5px;
	padding-right: 5px;
}

This function can be safely called multiple times per page, or you can just define multiple shortcodes to call it, or even make an universal shortcode that passes the images IDs as an argument. Your imagination is the limit here really.