Back to contents

JetProductGallery: How to Work with Gallery Slider Block in Gutenberg

 

This tutorial informs you about showcasing the horizontal or vertical product images gallery in the Gallery Slider block via the Gutenberg block editor.

The JetProductGallery is a WordPress plugin for showcasing images, and it is compatible with the Gutenberg and Elementor editors.

1 Step — Add a Gallery Slider block

Firstly, open the page or post to which you want to add the Gallery Slider block. Then click on the “Toggle block inserter” button and drag-n-drop the needed block. Also, you can type the “/” symbol to select the Gallery Slider block.

gallery slider block

2 Step — Customize General settings

After that, navigate to the General settings block. Here, you can choose one of three sources: “Post Types,” “Manual Select,” and “WooCommerce Products.” Check the Overview tutorial to find out more.

Also, you can Enable Video, Zoom, and Photoswipe Gallery options.

If you select the “WooCommerce Products” as the Source, you need to enter the Product ID, which can be found in the Product tab on the WordPress Dashboard.

woocommerce products source for the gallery

3 Step — Customize Image Settings

There’s an opportunity to change the Image and Thumbnails Size according to your preferences in the Images settings tab.

gallery slider block image settings

4 Step — Customize Slider Settings

The Gallery Slider block has a dedicated Slider tab with such settings:

slider tab settings
  • Slider Direction. Here you can select two types of how pictures will move after clicking:
    • Vertical;
gallery slider vertical direction
  • Horizontal.
gallery slider vertical direction
  • Enable Infinite Loop. If you turn this toggle on, the slider will be moving infinitely and show the first item right after the last one;
  • Enable Equal Slides Height. Available only for the Horizontal Direction. Unifies the height of the slides and makes their height equal;
  • Slider Sensitivity. Allows you to decrease or increase the slider sensitivity;
  • Transition Effect. You can select an effect for the pictures switching in this field:
    • Slide;
    • Fade;
    • Cube;
    • Coverflow;
    • Flip.
  • Enable Center Mode. Available only for the Horizontal Direction. Shows several pictures with the accent on the central one. This feature has two more fields that can be set differently on the three devices (Desktop, Tablet, and Mobile):
    • Slides to Show. Set the number of slides that will be shown together;
    • Space Between. You can increase or decrease the space between the images.
enable center mode
  • Show Navigation. If you enable this toggle, you can select icons for the Previous and Next arrows;
gallery slider arrow icons
  • Show Pagination. This feature also has two dedicated fields:
    • Pagination Type. Here you can select what you will press to switch the pictures: 
      • Bullets;
      • Thumbnails. If you pick this option, you can set the number of Visible Slides and the Space Between thumbnails on the three devices (Desktop, Tablet, and Mobile). Also, you can enable the Show Thumbnails Navigation option, where you can select icons for the Previous and Next arrows.
    • Pagination Position. Options of this feature are related to the Slider Direction:
      • Vertical Start or End;
      • Horizontal Top or Bottom.

With the JetStyleManager plugin, you can style any Gutenberg block for JetPlugins, and it is completely free. Here, you can learn more about JetStyleManager plugin settings in the Gutenberg editor.

When you’ve done customization, click on the “Publish” button and see the results on the front end.

That’s all. Now you know how to create a vertical or horizontal product images slider with the help of the JetProductGallery plugin in the Gutenberg block editor.