Image Carousel

The Image Carousel widget allows you to create interesting and interactive galleries on your web pages. With this widget, you can showcase a series of images that rotate automatically or upon user interaction.

Image Carousel
  • Add Images: Click the '+' button to add images to the carousel.
  • Image Resolution: Select the resolution for the images, such as "Thumbnail - 150 x 150".
  • Slides to Show: Choose the number of slides to display at one time.
  • Slides to Scroll: Decide how many slides are scrolled per swipe or click.
  • Image Stretch: Choose whether to stretch the images to fill the slide ("Yes" or "No").
  • Navigation: Select the navigation aids for the carousel (e.g., "Arrows and Dots").
  • Previous Arrow Icon: Choose an icon for the previous arrow.
  • Next Arrow Icon: Choose an icon for the next arrow.
  • Link: Set a link for when images are clicked, if desired.
  • Caption: Decide if you want to display a caption, and if so, what type (None, Title, Caption, Description).
Additional Options
  • Lazyload: Enable or disable lazy loading for images.
  • Autoplay: Toggle autoplay for the carousel.
  • Pause on Hover: Choose whether the autoplay will pause when the mouse hovers over the carousel.
  • Pause on Interaction: Decide if autoplay will pause when the carousel is interacted with.
  • Autoplay Speed: Set the speed of autoplay in milliseconds.
  • Infinite Loop: Enable or disable the infinite looping of slides.
  • Animation Speed: Adjust the speed of slide animations in milliseconds.
  • Direction: Select the direction in which the carousel slides (Left or Right).

Style Tab

Navigation
  • Arrows:
    • Position: Place the arrows inside or outside the carousel.
    • Size: Adjust the size of the arrows.
    • Color: Choose a color for the arrows.
  • Pagination:
    • Position: Set the position of the pagination to inside or outside the carousel.
    • Size: Adjust the size of the pagination dots.
    • Color: Select a color for the pagination dots.
    • Active Color: Choose a color for the active pagination dot.
Image
  • Vertical Align: Align the images vertically within the carousel slides.
  • Spacing: Adjust the spacing around images.
  • Border Type: Choose the type of border for the images.
  • Border Radius: Set the radius for the image borders to control corner roundness.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles