Thumbnail Slider

Estimated reading: 4 minutes

Using EAE-Thumbnail slider interactive sliders to your Elementor Website, with many functionalities and advanced features. Add and customize the thumbnail slides and images.

Content

Slides

  • Slides: By default, you will get three tabs to create slides for your slider. If you want to add more slides, click the Add Item button.
    • Image: Add an image to the slider. If you want to customize the image, click the Custom thumbnail option.
    • Content: Add custom content to the slides.
    • Style: Under the style option, you can give a specific styling to that particular slide.
  • Height: Set the height of the carousel.
  • Image Fit: Select how the image fits into its container, either Cover, Contain, or Auto.
  • Image Position: Set the image position within the slider, like center, center right, and top right, and there are many other options.
  • Image Size: Select the image size from Thumbnail to Full or Custom.
  • Slide Overlay: Enable it to add an overlay effect to the slides.
    • Color: Choose the overlay color.
    • Blend: Select the blend mode type like normal, multiply, blend, overlay, etc.

Thumbnails

  • Thumbs Per View: Enter the number of image thumbnails to view. By default, three thumbs are displayed.
  • Space Between Thumbs: Adjust the spacing between the thumbnails.
  • Arrow: Enable this option to add navigational arrows to the thumbnail slider.
  • Image Size: Set the image size within the thumbnails.
  • Image Fit: Choose from the following options.
  • Image Repeat: Choose from the following options.
  • Ratio: Set the image aspect ratio.
  • Position: Set image positioning bottom or top.

Slider Options

  • Effect: Choose how each slide transitions, either Slide or Fade.
  • Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms equals 1 second.
  • Autoplay: Show or hide autoplay.
    • Duration: Set the time it takes for each slide to appear.
    • Pause On Interaction: Select whether or not to pause autoplay when a user interacts with the carousel.
    • Pause On Hover: Select whether or not to pause autoplay when a user hovers on the carousel.
  • Direction: Set slider direction from the left or right.
  • Space Between Slides: Set the space between slides
  • Loops: Show the carousel in a continuous loop, infinitely.
  • Arrow: Choose to show or hide the navigation arrows
    • Icon Prev: Add the previous icon.
    • Icon next: Add the next icon.
  • Pagination: Select None, Dots, Fraction, or Progress.

Style

Slides

  • Space Between: Set the space between slides and thumbnails.
  • Border Type: Select the type of border to use around the slides. Select from none, solid, dotted, dashed, and groove.
  • Border Radius: Set the border radius to control corner roundness.
  • Padding: Set the padding.
  • Horizontal Position: Set the horizontal positioning of the text within the slides.
  • Vertical Position: Set the vertical positioning of the text within the slides.
  • Text Align: Align the text on the slides to the left, center, or right.
  • Text Shadow: Apply shadow on the text.
  • Content Width: Set the width of the text content in the slide.
  • Content Background Color: Choose a background color for the text content.
  • Content Padding: Set the content padding accordingly.

Heading

  • Text Color: Choose an appropriate color for the heading text.
  • Typography: Set the typography options for the heading text.
  • Spacing: Adjust the spacing between the heading text and description.

Description

  • Text Color: Choose an appropriate color for the text.
  • Typography: Set the typography options for the text in the description.
  • Spacing: Adjust the spacing between the description and the button.

Button

  • Typography: Set the typography options for the button text.
  • Text Color: Choose the color for the text.
  • Background Color: Choose the button’s background color.
  • Border Type: To give a border around the button, choose the border type from none, solid, dotted, dashed, or groove.
  • Width: Set the border width.

Slider Navigation

  • Color: Choose a color for the navigational text.
  • Active Color: Set the color for the slide navigation to active.
  • Size: Adjust the size of the navigation text.

Thumbnails

  • Border Type: Select the type of border to use around the thumbnails.
  • Border Radius: Set the border radius to control corner roundness.
Share this Doc

Thumbnail Slider

Or copy link

CONTENTS