Smart Slider 3 is a free WordPress slider plugin with a feature set that rivals premium alternatives. The free version covers: responsive sliders, multiple slide types (image, video, post), layer animations, lightbox, and built-in generator slides (dynamic content from posts, WooCommerce products, etc.). Smart Slider 3 Pro adds advanced effects, parallax, and additional layer types.
Step 1: Create a Slider
Go to Smart Slider 3 → New Project. Choose “Slider” (standard slider) or “Block” (static layout, no sliding). Select a template from Smart Slider’s library or start from scratch. Templates range from simple image carousels to complex hero sections with animated layers — choose one close to your desired result and customise.
Step 2: Add Slides
In the slider editor, click “Add slide.” For each slide, set the background (image, video, solid colour, or gradient). Slides can also be type-based: Image slides (simple photo carousels), Post slides (automatically pulls from WordPress posts), or WooCommerce slides (pulls from products). Post and WooCommerce slides are “generator” slides — they create one slide per post/product automatically without manual entry.
Step 3: Add Layers
Layers are content elements placed on top of the slide background: text, button, image, video, HTML, or shape. Click “Add layer” and place it on the slide canvas. Configure: animation (how the layer enters and exits), timing, position (absolute or responsive), and appearance. Layer animations make Smart Slider’s slides more dynamic than simple image carousels.
Prefer to have someone handle the setup? Describe what you need and get a free estimate — no obligation.
Step 4: Configure Slider Settings
In the slider settings, configure: dimensions (full width, fixed width, or full page), autoplay speed, transition effect (slide, fade, or crossfade), loop, and navigation (arrows, dots, or none). For hero sections, full-width mode with 100vh height fills the viewport. For carousels, fixed dimensions with visible adjacent slides create a card-carousel effect.
Step 5: Embed the Slider
Smart Slider generates a shortcode and a Gutenberg block for embedding. Use the shortcode in any page builder’s shortcode element, or the Smart Slider block in Gutenberg. The slider loads its own CSS and JavaScript only on pages where it is embedded.
Post and WooCommerce Generator Slides
Smart Slider 3’s generator slides create dynamic content automatically without manual entry. For a blog post slider:
- Add a new slide and select “Generator” as the slide type
- Choose “Post” as the generator source
- Configure: which post categories to include, number of slides, ordering (newest first, random, etc.)
- Design the slide layout using layers that use dynamic variables: {post_title}, {post_excerpt}, {post_thumbnail_url}
The slider automatically creates one slide per matching post. Publish new posts and they appear in the slider automatically — no manual slider updates needed. The same approach works for WooCommerce products: select “WooCommerce” as the generator and configure product filtering. This is Smart Slider 3’s most powerful feature for content-driven sites.
Performance: Slider Hero vs Static Hero
Sliders consistently underperform static hero images on Core Web Vitals, particularly Largest Contentful Paint. Each additional slide adds JavaScript and image weight. If your slider has 5 slides but most visitors never advance past the first, you are paying the performance cost of all 5 slides for minimal engagement benefit.
Consider: does your analytics show significant engagement with slides 2-5? If not, a static hero image with Elementor or your page builder performs better on both speed and conversion metrics. Smart Slider 3 is the right choice when the slider content genuinely warrants it — product features that benefit from progressive disclosure, before/after comparisons, or testimonial carousels where the additional content drives engagement.