Image Slider Block

The Image Slider Block is a flexible solution to showcase multiple images in a slider or carousel format. You can set autoplay, slider duration, and transition effects to the slider to create a captivating user experience.

You can use the slider to present portfolios, product images, testimonials, and more. This documentation will guide how to use the Image Slider Block. Get started!

Adding the Image Slider Block #

  • Open the Gutenberg Block Editor by clicking the Plus (+) icon.
  • Type Image Slider in the search box.
  • Click the Image Slider block once it appears.
Add the Image Slider Block
  • You’ll get two options to add images.
  • You can add images whether the Upload or Media Library option.
  • Select any suitable option and add your images.
Add Images
  • Select as many images as you want.
  • Click the Create a new gallery button at the end.
Select and Add Images

Take a quick look at how the Image Slider block works.

General Settings #

  • Change images using the Arrow <> icon.
  • Add a Caption, Alt Text, and URL to each image.
  • You’ll get these options below the slider. 
Add Caption to the Images
  • Go to the Slider Settings option on the right sidebar.
  • You can toggle on the options: Wrap around, Allow dragging, and Use pagination.
  • Set Pagination and Transition types from the respective dropdown menu.
  • Up or down the Height scale to maximize or minimize the slider size.

# Terms Explained

  • Wrap Around – The slider will start from the beginning once it reaches the end.
  • Allow Dragging – Users can change the slider image using their cursor.
  • Use Pagination – The dotted mark you see immediately below the slider images.
  • Transition – It adds slider effects.
Configure Slider Settings
  • Toggle on the autoplay option if you want to Enable Autoplay.
  • You can set seconds to define the Autoplay Duration.
Enable Autoplay

Conclusion #

The Image Slider block today is an important element on any creative website. You can use it to design captivating landing pages, demonstrate product variations, present infographics, share important announcements, and more.

You can make your image collection more meaningful using this block. We have tried to explain everything about this block to you in detail. Hope you can use the Image Slider block on your website without any problem.

What are your feelings
Updated on June 2, 2023