SmartUpWorld Post Slider

Beschreibung

SmartUpWorld Post Slider shows your posts as a responsive carousel of full-image cards. Paste one shortcode into any post, page, widget or template — no coding required — and adjust the look from the dashboard.

Features:

• One shortcode — [suwps_post_slider] — works in posts, pages, widgets and PHP templates
• Full-image cards with category badge, author, date and a Read More button
• Every part can be switched on or off: category, author, date, Read More button, arrows, dots, autoplay and pause button
• Settings page: show/hide each part, set the time per slide, pick the button colours, set your own Read More label
• Shortcode attributes override the settings for a single slider
• Responsive — 1, 2 or 3 cards depending on the space the slider has, not just the screen size
• Filter by category, show specific posts by ID, or skip the post being viewed
• Uses the primary category from Rank Math or Yoast SEO when one is set
• Works with any theme: the slider’s styles are scoped to its own class names
• Works with WebP and lazy-load plugins such as Imagify, EWWW and ShortPixel, including their <picture> tags
• Right-to-left languages supported

Accessibility

The slider is built to meet WCAG 2.2 level AA:

• A pause/play button whenever slides move on their own (WCAG 2.2.2)
• Slides stop moving while the mouse is over them, as soon as a keyboard user enters the slider, and for good once a visitor uses the arrows, dots or swipes
• For visitors who have asked their device to reduce motion, slides switch instantly instead of gliding
• Keyboard users can tab through every card; the focused card always slides into view, with a clear focus outline
• Labelled buttons, slide positions announced to screen readers, 24px minimum click targets
• Default colours meet the AA contrast ratios, including text over photos

If you change the colours in the settings, keep text at a contrast ratio of at least 4.5:1 against its background, and keep the pause button on while autoplay is on.

Performance

• No jQuery. The carousel uses Embla Carousel: about 10 KB of JavaScript (gzipped) in total, where Owl Carousel needed 11 KB plus jQuery
• CSS and JavaScript load only on pages that use the shortcode; scripts are deferred
• No layout shift while the page loads: cards are laid out with CSS before the script runs
• Images lazy-load with responsive sizes, and the next cards preload just before they slide in
• Autoplay only runs while the slider is visible on screen
• Add priority="true" when the slider is at the top of a page, so its first image loads first

Basic usage:

[suwps_post_slider]

With a header:

[suwps_post_slider eyebrow="From The Blog" title="Latest Insights" subtitle="Practical guides on website care, speed and security."]

For single post templates (skip current, no arrows):

[suwps_post_slider title="Related Articles" count="6" skip="current" nav="false" underline="false"]

Your own button text and colour:

[suwps_post_slider readmore_text="Lees meer" accent="#2c6e49"]

In a PHP template:

<?php echo do_shortcode( '[suwps_post_slider]' ); ?>

The Post Slider admin page lists every attribute with copy-ready examples. Full documentation: smartupworld.com/smartupworld-post-slider/

Third-party library

The carousel is powered by Embla Carousel 8.6.0 by David Jerleke, released under the MIT License. The bundled file assets/js/embla-carousel.umd.js is the unmodified build from the official npm package; the human-readable source is at github.com/davidjerleke/embla-carousel. Its license is included as assets/js/embla-carousel-LICENSE.txt.