Content Sliders
Create responsive, accessible content sliders and carousels in YOOtheme Pro that turn images, videos and dynamic content into engaging visual stories.
Content sliders, also called carousels, show multiple items in a compact, interactive horizontal layout. They are perfect for image carousels for portfolios and case studies, testimonial sliders and pricing tables. With dynamic content, you can also automatically create post sliders or product carousels with content from Joomla, WordPress or WooCommerce.
Choose the Panel Slider when each item should read like a card. Place media above, below or beside the text, keep cards at the same height and align links along the bottom. This works especially well for pricing plans, team profiles and product teasers.
The Overlay Slider puts text directly over full-bleed images and videos. For example, present a portfolio with an image carousel and reveal its title and details when users hover over a slide. Set the slider to fill its column or the viewport. Apply background colors to recolor the media, or use blend modes to merge text with the image instead of placing it on a conventional overlay. Hover images and videos can reveal another product view or extra detail without opening a new page.
For story-led layouts, scroll-based slider parallax moves horizontally through the carousel as users scroll down the page. Place the slider in a sticky column so it remains in view while the surrounding content advances, creating a continuous visual story with just a few clicks.
Both sliders are fully responsive, so browsing feels natural on every screen. On touch screens and desktops, slides follow your fingertip or mouse cursor as you drag and accelerate to keep up with your pace. Users can move through individual slides or complete sets, navigate with arrows or dots, or let autoplay move through the carousel automatically. Enable an infinite loop or stop the slider when it reaches the final item. Accessible keyboard navigation lets more users browse independently, while automatically added WAI-ARIA attributes help screen readers announce the current slide and its controls.
Built-in image lazy loading prevents large carousels from delaying the initial page load and improves overall performance. Images in off-screen slides load only as needed, while adjacent slides are preloaded to keep the next image is ready and navigation remains smooth.
Together, the Panel Slider and Overlay Slider cover everything from structured card carousels to full-bleed sliders with immersive hover and scroll effects.
