Slideshow

1. What is a slideshow?

A slideshow is a display of a series of images or other content, typically displayed in sequence, often with added transitions between each image. It is commonly used on websites to showcase multiple images or pieces of content in a visually appealing and dynamic way. They are often used for presenting portfolios, product galleries, or highlighting key features or promotions.
In Eurus theme, go to the homepage, in the Template section group, add the “Slideshow” section.

2. Use slideshow as the page hero section.

"Hero" refers to the prominent section at the top of a webpage, often used to grab the visitor's attention and deliver key messages or visuals. By enabling the "Use as hero" configuration in the slideshow settings, you can designate the slideshow to serve as the hero section on a page. This allows you to leverage the dynamic and visually engaging nature of a slideshow to create an impactful introduction to the page content. 

Keep in mind that images used in the hero section won't be lazy-loaded, with the aim of preventing an increase in page load times and minimizing any negative impact on user experience (UX), so it's best to limit having only one hero section per page to avoid impacting performance.

3. How to set up each slide?

Click “Add slide” set up each slide in the slideshow:

a) Image

• Select an image for the slide. Optimize the image for mobile devices if necessary.
• Adjust the opacity of the image overlay. A higher value makes the image darker.

b) Content & content position:

• Enter the subheading, heading, and text to display on the slide.
• Customize the labels and links for up to two buttons. Choose whether to show buttons as primary buttons with full styling or as outline buttons.
• Align the text and buttons on the slide. Customize the horizontal and vertical positions if needed.
• Choose colors for the primary button, including hover effects, text color, and hover text color. Optionally, set colors for the secondary button.

These settings allow you to create engaging and visually appealing slides with customized content and styling for each slide in the slideshow.

4. How to customize the animation and styles of the slideshow?

To customize the animation and styles of the slideshow, follow these steps:

• Enable autoplay and adjust the timing for changing slides. You can typically set the duration to change slides every 5 to 10 seconds.

• Choose the pagination style that best fits your design. Options may include none, dots, or bars for indicating slide progress.
• Select the transition style for slide changes. Common options include slide or fade effects.

• If desired, enable the parallax effect. This adds depth to the slideshow by moving background images at a slower rate than foreground content: Theme settings => Design => Enable “Disable parallax effect". By disabling this configuration, you effectively enable the parallax effect for the slideshow.
• Adjust the height of each slide to ensure it displays optimally within your web page layout.
• Customize the padding around the slideshow to control its spacing within the page content.