Testimonial Carousel

The Testimonial Carousel widget allows you to create a sliding carousel of customer testimonials in various designs. You can display multiple testimonials in a dynamic format, making it easy for visitors to view and engage with positive feedback.

View Live Demo

Content Tab

Slides

• Slides: Add or remove testimonial items. Each item can include content, an image, the name of the person, their title, and a rating.
• Skin: Choose the visual style of the testimonial carousel (Default, Bubble).
• Layout: Select how the image will be displayed relative to the content (Inline, Stacked, Above, Left, Right).
• Alignment: Align the content within the carousel slides.
• Slides Per View: Define the number of slides visible at the same time. Decimals can be used for partial views.
• Centered Slides: Enable this to center slides in the view.
• Slides to Scroll: Set the number of slides to scroll per swipe or click.
• Width: Adjust the carousel width as a percentage of its container.

Additional Options

• Arrows: Toggle the display of navigation arrows.
• Pagination: Choose the pagination style (Dots, Fraction, Progress).
• Transition Duration: Specify the duration of transitions between slides in milliseconds.
• Autoplay: Enable the carousel to cycle through slides automatically.
• Autoplay Speed: Set the speed of autoplay, in milliseconds.
• Infinite Loop: Allow the carousel to loop endlessly.
• Pause on Hover: Pause autoplay when the cursor hovers over a slide.
• Pause on Interaction: Pause autoplay when the slides are interacted with (e.g., clicked or swiped).
• Image Resolution: Select the quality of the images displayed in the carousel.
• Lazyload: Opt to load images only as they enter the viewport to improve performance.
• Rating: Adjust the appearance of the rating system (stars).
  • Stars Style: Customize the style of the stars for the rating.
  • Active Stars Style: Style the stars that represent the active rating.

Style Tab

Slides

• Space Between: Set the space between slides in pixels.
• Background Color: Choose a background color for the slides.
• Border Size: Define the thickness of the border around the slides.
• Border Radius: Adjust the roundness of the slide corners.
• Border Color: Select a border color for the slides.
• Box Shadow: Add a shadow effect to the slides.
• Padding: Set the padding inside each slide.

Content

• Gap: Adjust the space between the content and the edges of the slide.
• Text Color: Change the color of the testimonial text.
• Typography: Customize the font settings for the testimonial text.
• Text Stroke: Apply a stroke effect to the text if desired.

Name

• Text Color: Select the color for the name text.
• Typography: Customize the font settings for the name text.

Title

• Text Color: Choose the color for the title text.
• Typography: Adjust the font settings for the title text.

Image

• Size: Set the size of the image within the slide.
• Gap: Control the space between the image and its adjacent content.
• Border: Toggle the border around the image on or off.
• Border Radius: Adjust how rounded the corners of the image should be.

Navigation

• Arrows:
  • Right Arrow: Customize the appearance of the right navigation arrow.
  • Left Arrow: Customize the appearance of the left navigation arrow.
  • Vertical Offset: Adjust the vertical positioning of the arrows.
  • Horizontal Offset: Adjust the horizontal positioning of the arrows.
  • Size: Set the size of the arrows.
  • Color: Choose a color for the arrows.
  • Shadow: Apply a shadow effect to the arrows.

Rating

• Stars: Customize the style of the stars used for ratings.
• Active Stars: Style the stars that show the active rating.
• Size: Set the size of the stars.
• Spacing: Adjust the space between the stars.
• Margin: Control the margin around the rating area.