Create a fully responsive and smooth image slideshow of your products, services, or clients.
How To Add The Image Slider Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Image Slider or you can search for it if it doesn’t pop up quickly for you.
- 2.Next, you have to upload images that you want to showcase.
%20(1).png?alt=media&token=59ecbc2b-81b9-4175-8472-05bebac7a143)
How To Configure The Image Slider Block #
To configure the content of your Image Slider block, switch to the ‘Content’ tab.
Image Carousel #
Size – Select the size of the images displayed in the image slider as Large, Extra Large.
Gutter – Adjust the spacing between the images of the image slider.
Radius – You can set the radius width of the corners of an image.
Custom Width – Turn on to assign custom width to the images of the image slider.
Width in pixels – Adjust the width of the images when the Custom Width setting is turned on.
Heights in Pixels – Adjust the height of the images in the image slider.
Small Images – Toggle to display small sized images in the image slider.
Thumbnails – Toggle to display thumbnail images below the main images in the image slider.
Lightbox – Toggle to enable the image lightbox.
%20(1).png?alt=media&token=43ce215b-1769-4f8c-ba3d-1ab0fb9bebbe)
Slider Settings #
Slider Settings offer options to customize the image slider. You’ll see the below options to enable–
- Autoplay
- Draggable
- Free Scroll
- Arrow Navigation
- Dot Navigation
- Align Cells
%20(1).png?alt=media&token=43846ab9-606a-4890-a85d-0e1bbab09e3c)
How To Style The Image Slider Block #
Switch to the ‘Style’ tab to customize the Image Slider block.
Arrow #
Color- Select the color of the arrow in the image slider.
Background Color- Select the background color of the arrow in the image slider.
Background Opacity – Adjust the background opacity of the arrow in the image slider.
Background Radius – Adjust the background radius of the arrow in the image slider.
%20(1).png?alt=media&token=1bfb4460-6cca-4be9-abd4-7a65e01bdf77)
Border #
Border Color – Select the border color of the images in the image slider.
Border Style – Select the border style of the images as Solid, Dotted, Dashed.
Border Size – Adjust the border size of the images in the image slider.
