SmartUpWorld Post Slider

What Is SmartUpWorld Post Slider?

SmartUpWorld Post Slider shows your posts as a responsive carousel of full-image cards, each with a category badge, author, date and a Read More button. Paste one shortcode into any post, page, widget or template. Everything else is optional.

Key features:

• One shortcode — [suwps_post_slider] — for 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 for the defaults: what the cards show, time per slide, Read More label and button colours
• Shortcode attributes override the settings for a single slider
• Responsive — 1, 2 or 3 cards, depending on the space the slider has rather than 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, with right-to-left languages, and with WebP plugins such as Imagify that wrap images in <picture> tags
• Built to WCAG 2.2 level AA, with about 10 KB of JavaScript and no jQuery

Installation

1. Go to Plugins → Add New in your WordPress dashboard, search for SmartUpWorld Post Slider, and click Install Now. Or download from WordPress.org and upload the zip.
2. Click Activate.
3. Paste [suwps_post_slider] into any post, page, or widget.
4. Optional: open Post Slider → Settings in your admin sidebar to choose what the cards show, the time per slide and the button colours. The Shortcode Guide tab lists every attribute with copy-ready examples.

Basic Shortcode

Drop this anywhere to display your 8 latest published posts in a responsive carousel:

[suwps_post_slider]

In a PHP template file:

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

Dashboard Settings

Under Post Slider → Settings you set the defaults for every slider on your site. A shortcode attribute overrides the setting for that one slider, so you can still make an individual slider look different.

Show on the slider

Switch each part on or off. Everything is on by default.

• Category badge — the post's category above the title
• Author — the author's display name
• Date — in the date format from Settings → General, in your site language
• Read More button
• Arrows — the slim tabs on the left and right edges
• Dots — one per screenful of cards
• Autoplay — slides move on their own while the slider is on screen
• Pause button — required for accessibility (WCAG 2.2.2) whenever autoplay is on

Time per slide

How long each slide stays before the next one moves in, from 2 to 15 seconds. The default is 4 seconds; lower is faster.

Read More label

Your own button text, for example Lees meer on a Dutch site. Left empty, the button says “Read More”, translated automatically when a translation for your language is available.

Button colours

All Shortcode Attributes

“Settings” in the Default column means the value set under Post Slider → Settings.

Usage Examples

[suwps_post_slider]

[suwps_post_slider title="Latest Insights"]

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

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

[suwps_post_slider title="Tech Articles" category="tech" count="6"]

[suwps_post_slider title="Featured Posts" ids="12,45,67,89"]

[suwps_post_slider nav="false" dots="false"]

[suwps_post_slider cat="false" author="false" date="false"]

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

[suwps_post_slider delay="6"]

[suwps_post_slider priority="true"]

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 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
• Every card can be reached with the Tab key; the focused card always slides into view, with a clear focus outline
• Labelled buttons, slide positions announced to screen readers, and click targets of at least 24px
• Default colours meet the AA contrast ratios, including text over photos

If you change the colours, 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 runs on Embla Carousel (MIT License): about 10 KB of JavaScript, gzipped, in total
• CSS and JavaScript load only on pages that use the shortcode, and the scripts are deferred
• No layout shift while the page loads — the cards are laid out with CSS before the script runs
• Images use responsive sizes and lazy loading, 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

Upgrading from 1.0

Existing shortcodes keep working. A few things look or behave differently:

• New default design. Full-image cards in a bronze colour scheme replace the blue design. Pick your own colours under Post Slider → Settings → Button colours.
• Width. Sliders now fill the area they are placed in. Use layout="contained" for the previous centred 1200px width.
• CSS classes. The slider's classes now start with suwps- instead of suw-. Custom CSS written for the old classes needs updating; theme rules for the old classes no longer affect the slider.
• Owl Carousel. The plugin no longer loads Owl Carousel. If your theme used the plugin's copy for its own sliders, load Owl Carousel from the theme instead.