Gallery Slider

Homepage
Articles
Extras
Gallery Slider

General

This is a unique Elementor widget that lets you navigate through photos by clicking their thumbnails. It has multiple layout possibilities and thumbnail hover effects.

Image sliders are great, but users don’t have an overview of the images which forces them to go through all of them. With the thumbnails present you can handle a big number of images and give your visitors an improved experience. Moreover, the thumbnails and preview area supports captions, a lot of hover effects, css filters and more.

Settings

Content
- Thumbnails
  - Columns — Set the number of thumbnails per row that appear in the thumbnails panel
  - Caption — You can show a caption inside the thumbnail. Bare in mind that showing a caption when thumbnails are really small means you have to adjust the font size so they fit.
- Preview — The area with the slider where we show the big images
  - Link to
    - None — No link
    - Media File — Opens the images in a lightbox and you can navigate through them with the Elementor lightbox.
    - Custom URL — Open an URL if you click on any of the images in the preview area
  - Lightbox
    - Default — Reverts to the global option set in the Elementor page settings
    - Yes — Enables the lightbox
    - No — Disables the lightbox
  - Caption — Defines what should be used as the image caption
  - Arrows — Enables or disabled the arrows inside the slider
  - Autoplay — Defines wether or not the slider should play automatically
  - Autplay speed — The time to wait before switching slides if Autoplay is on
  - Pause on Hover — When the visitor hovers over the slider, if Autoplay is enabled, the slider will stop cycling.
  - Infinite Loop — When reaching the last slide, the Slider can continue with the first one
  - Adaptive Height — The slider can adjust in height depending on the height of each slide / image
  - Animation Speed — The duration of the animation from one slide to another
  - Direction
    - Left — Move the slides to the left
    - Right — Move the slides to the right
Style
- Preview
  - Layout
    - Position — The position of the slider / preview area relative to the thumbnails area. Can be top, left or right.
    - Stack on — The preview will automatically show on top of the thumbnails to allow for better ux on smaller devices. This control lets you decide if this should happen on mobile or on mobile and tablet.
- Preview Hover Effects
  - Transition — A control that lets you adjust the ease and speed of the hover transitions
  - Effect — When hovering the preview, the content (caption) can transition in or out. You have multiple effects available, similar to the Posts Extra widget.
  - Default (tab) — Choose styles for the default state of the preview
  - Hover (tab) — Choose styles for the hover state of the preview
- Thumbnails Hover Effects — The effects for the thumbnails can be set for Images as well as Overlays.
  - Images
    - Scale — Set how much to zoom the image on default and hover states
  - Overlays — First set a background for the overlay
    - Background Type — Choose a color or background image for the overlay to preview it in Default state
    - Margin — The margin between the overlay and the edge of the thumbnail
    - Opacity — The opacity of the overlay

FAQ

Can I hide the thumbnails completely?

If you set the Preview > Layout (tab) > Width control to 100%, then the thumbnails will be hidden.

Can I pull photos from a WordPress gallery I saved?

Yes. The gallery control has dynamic tags enabled.

Can I add a background colour for the preview captions?

You can do so by going to Style > Preview Hover Effects > Captions > Background Type.

I cannot access the close button on the lightbox

If your theme handles opening images in a lightbox as well, most likely two separate lightboxes are opened at the same time when you click on the preview. You will need to disable the theme lightbox from the theme settings to be able to use the Elementor one.