Thumbnail Slider

Add interactive sliders to your Elementor Website, with lots of functionalities and advanced features. Add and customize the thumbnail slides and images.

Content

Slides

Thumbnailslider- Slides

  • Slides: By default, you will get three tabs to create slides for your slider. If you want to add more slides, click on the Add Item button.
    • Image: Add an image to the slider. If you want to customize the thumbnail image, click on 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, top right, and there are many other options to choose from.
  • Image Size: Select size of the image, 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

Thumbnailslider- Thumbnail

  • 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.
  • Ratio: Set the image aspect ratio.
  • Position: Set image positioning bottom or top.

Slider Options

Thumbnailslider- Slides

  • Effect: Choose how each slide transitions, either Slide, Fade.
  • Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 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 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

Thumbnailslider- Style

  • 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 color for the text.
  • Background Color: Choose button's background color.
  • Border Type: To give border around the button, choose the border type from none, solid, dotted, dashed, and groove.
  • Width: Set the border width

Slider Navigation

  • Color: Choose color for the navigational text.
  • Active Color: Set color for the slide navigation on 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.
  • Arrow:
    • Color: Choose color for the navigational arrows
    • Size: Set the arrow size.