內容簡介
SmartUpWorld Post Slider 讓您的文章以響應式全圖卡片旋轉木馬的形式展示。只需在任何文章、頁面、小工具或模板中粘貼一個短碼，無需編碼，並可從控制台調整外觀。
【主要功能】
• 一個短碼適用於所有文章和頁面
• 全圖卡片顯示類別標籤、作者、日期和「閱讀更多」按鈕
• 可隱藏或顯示各部分內容
• 響應式設計，根據可用空間顯示 1 至 3 張卡片
• 支援分類過濾和特定文章顯示
• 無需 jQuery，使用 Embla Carousel 提升效能
外掛標籤
開發者團隊
原文外掛簡介
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
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:
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.
