We have completely reimagined the Content Slider module. What used to be a tool primarily for fullscreen headers has been transformed into a powerhouse for modern, interactive layouts. This evolution allows you to break the vertical grid and create immersive digital experiences through innovative content movement methods.

In addition to the Default mode (the classic fullscreen slider), you can now choose from three revolutionary methods:

• Marquee: Create fluid, continuous loops, perfect for banners, and testimonials.
• Carousels: Transform your columns into a flexible carousel navigation.
• Sticky Scroll: Build stunning horizontal scrolling sections (or even full horizontal websites) that react directly to the user's vertical scroll, perfect for advanced storytelling.

Please find below example pages from our demo site using these new methods:

• Classic Saas (Marquee)
• Creative Wellness (Sticky Scroll and Marquee)
• Content Slider (Default, Marquee and Carousel)
• Testimonial Quotes (Marquee and Carousel)

Width and structure

To achieve the best results, it is essential to understand how the module interprets your content:

• Recommended structure: We suggest treating each Inner Row as a single, independent element of the slider, even if it's possible to create multiple columns Inner Rows, screenshot . Once the page is rendered, these will be individual side-by-side elements, screenshot ;
• Multi Columns content: If you choose to place multiple columns (e.g., 4 or 6) within a single Inner Row, remember to set the Width to a large value (such as 100vw) to ensure the entire block is contained correctly, screenshot ;
• Scalable values (Clamp): In our demos, we generally use clamp values. This allows you to define a single scalable width that automatically adapts across Desktop, Tablet, and Mobile breakpoints, screenshot . If you need a great tool that can help you create advanced setups, we recommend the https://clamp.font-size.app/ .

Methods options

Carousel

• Items Desktop/Tablet/Device: Set the number of items to display simultaneously across different screen sizes.
• Items Vertical Alignment: Choose how items are aligned vertically within the carousel track (e.g., Equal Height).
• Items Gap: Adjust the horizontal spacing between each carousel item.
• Auto Rotate Slides: Set the time interval (in milliseconds) for automatic slide transitions.
• Auto Rotate Hover: Choose whether the automatic rotation should pause when a user hovers over the carousel.
• Navigation Speed: Define the duration of the sliding animation in milliseconds.
• Loop: Enable this to allow the carousel to scroll infinitely in a continuous loop.
• Slider Target: Enter the unique ID to link this carousel to a Slider Navigation module for custom controls.

Marquee

• Items Vertical Alignment: Controls the vertical positioning of elements within the marquee track.
• Items Gap: Defines the spacing between the elements as they flow through the loop.
• Animation: Select the specific movement style, such as "Marquee Scroll (right to left)".
• Speed: Sets the constant velocity of the marquee movement.
• Edge To Edge: Enable this to allow the marquee to span the full width of the viewport.
• Draggable: Allows users to manually click and drag the marquee content.
• Blurred Edges: Adds a soft fade effect to the left and right sides of the marquee container for a smoother visual transition.

Sticky Scroll

• Size & Width: Define the total width of the horizontal scroll area, with Width Tablet/Mobile overrides for responsive design.
• Direction: Choose the horizontal flow of the content (e.g., Left to Right) as the user scrolls vertically.
• Items Vertical Alignment: Sets the vertical alignment for all items within the sticky container.
• Items Gap: Controls the horizontal spacing between the elements within the horizontal scroll track.

Notes

• To ensure the most efficient and user-friendly design experience, we have optimized how these new layout methods behave within the Frontend Editor. When you are building your page, you will notice that each slide or section is displayed vertically, one after the other. We purposefully designed it this way to grant you complete editing accessibility for every element. By keeping the Marquee, Carousel, and Sticky Scroll scripts inactive during the editing phase, we allow you to easily select, move, and customize any module within your Inner Rows without the interference of motion scripts. To experience the final interactive result and see your motion effects in action, simply Preview the page.