=== SmartUpWorld Post Slider ===
Contributors: smartupworld
Tags: post slider, carousel, recent posts, shortcode, accessibility
Requires at least: 5.0
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

An accessible, lightweight post slider. Show your latest posts anywhere with one shortcode and style it from the dashboard.

== Description ==

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/](https://smartupworld.com/smartupworld-post-slider/)

**Third-party library**

The carousel is powered by [Embla Carousel](https://www.embla-carousel.com/) 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](https://github.com/davidjerleke/embla-carousel). Its license is included as `assets/js/embla-carousel-LICENSE.txt`.

== Installation ==

1. Upload the `smartupworld-post-slider` folder to `/wp-content/plugins/`, or install it from **Plugins → Add New**.
2. Activate the plugin through the **Plugins** menu in WordPress.
3. Paste `[suwps_post_slider]` into any post, page, or widget.
4. Visit **Post Slider** in your WordPress admin menu to choose what the cards show, set colours, and see every shortcode option.

== Frequently Asked Questions ==

= What shortcode do I use? =
Use `[suwps_post_slider]` anywhere in your site. The admin **Post Slider → Shortcode Guide** tab lists every attribute with copy-ready examples.

= How do I hide the date, author or category? =
Untick them under **Post Slider → Settings** to hide them on every slider, or use `date="false"`, `author="false"` or `cat="false"` on a single slider.

= How do I change the colours? =
Go to **Post Slider → Settings → Button colours**. For one slider only, use the `accent` attribute, for example `accent="#2c6e49"`.

= How do I change the "Read More" text? =
Type your own label under **Post Slider → Settings**, or use `readmore_text="Lees meer"` on a single slider. Left empty, the label is translated automatically when a translation for your language is available.

= Can I filter by category? =
Yes. Use `category="your-category-slug"` or `category="14"` (numeric ID). Example: `[suwps_post_slider category="tech" count="6"]`

= How do I show specific posts? =
Use the `ids` attribute with comma-separated post IDs: `[suwps_post_slider ids="12,45,67"]`. The posts appear in that order. This overrides `count` and `category`.

= Does it work on single post templates? =
Yes. Add `skip="current"` to leave out the post being viewed, ideal for a "Related Articles" section.

= Does it conflict with my theme's slider? =
No. The plugin does not load Owl Carousel or jQuery and uses its own `suwps-` class names, so sliders from your theme or other plugins are not affected.

= Can I turn autoplay off? =
Yes: untick **Autoplay** in the settings, or use `autoplay="false"`. With autoplay off, the pause button is not shown.

= Can I make the slides change faster or slower? =
Yes. Set **Time per slide** under **Post Slider → Settings**, from 2 to 15 seconds (4 by default). For one slider only, use the `delay` attribute in seconds, for example `delay="6"`.

= Why is there a pause button? =
Content that moves on its own needs a way to stop it (WCAG 2.2.2). You can hide it under **Post Slider → Settings**, but your slider will then no longer meet that accessibility requirement while autoplay is on.

= Where is the documentation? =
Full documentation is at [smartupworld.com/smartupworld-post-slider/](https://smartupworld.com/smartupworld-post-slider/). The admin **Post Slider** page also contains all attributes and copy-ready shortcode examples.

== Screenshots ==

1. The default design: full-image cards with category badge, author, date and Read More button, slim side arrows, pause button and dots.
2. Settings tab: show or hide each part of the cards, set the Read More label and pick the button colours.
3. Shortcode Guide tab with every attribute and copy-ready examples.

== Changelog ==

= 1.1.0 =
* New default design: full-image cards with category badge, author, date and a frosted Read More button.
* New Settings tab: show or hide the category, author, date, Read More button, arrows, dots, autoplay and pause button; set the time per slide; pick the button colours; set the Read More label.
* New shortcode attributes: cat, author, date, readmore, readmore_text, autoplay, pause, delay, loop, accent and priority.
* Replaced Owl Carousel, which is no longer maintained and needs jQuery, with Embla Carousel 8.6. No jQuery, less JavaScript.
* Accessibility: pause/play button, slides stop on interaction and keyboard focus, focused cards slide into view, visible focus outlines, 24px click targets, contrast-safe default colours, no sliding animation with reduced motion.
* Performance: no layout shift while loading, deferred scripts, responsive image sizes, preloading of the next cards, autoplay only while visible, and a priority option for sliders at the top of a page.
* The card category uses the Rank Math or Yoast SEO primary category when set, and skips "Uncategorized".
* Changed: `layout` now defaults to "fullwidth", which fills the area the shortcode is placed in. Use `layout="contained"` for the previous centred 1200px width.
* Changed: CSS classes now use the `suwps-` prefix. Custom CSS written for the old `suw-` classes needs updating.
* Fixed: the FAQ wrongly said WordPress would remove a duplicate Owl Carousel loaded by a theme.

= 1.0.1 =
* Renamed the shortcode tag to [suwps_post_slider] for a unique, conflict-free prefix.
* Moved admin page CSS and JavaScript into properly enqueued files.
* Renamed the "exclude" attribute to "skip".

= 1.0.0 =
* Initial release.
* Bundled Owl Carousel 2.3.4 — no CDN dependency.
* Shortcode attributes: eyebrow, title, subtitle, underline, count, category, ids, exclude, layout, nav, dots.
* ARIA accessibility improvements — labelled nav buttons and dots.
* LCP-safe eager loading on first slide image.
* Admin documentation page with copy-ready examples and SmartUpWorld branding.

== Upgrade Notice ==

= 1.1.0 =
New design, a settings page, and a lighter, accessible carousel without jQuery. Sliders now fill their container by default, and custom CSS for the old suw- classes needs updating.

= 1.0.1 =
The shortcode tag changed to [suwps_post_slider]. Update any existing usage.

= 1.0.0 =
Initial release.
