All guides / Content-publishing
Smart Content Slider
Overview
Smart Content Slider turns a set of titled slides into a carousel that visitors click or swipe through. There's no settings screen — you build the carousel directly in the page or post content using two shortcodes: one wrapper, [content-slider], and one for each slide, [content-slide].
This plugin depends on Realsmart Core (which supplies the shared slider library). Realsmart Core is active on every SmartPress site, so this only matters if slides appear as a plain stacked list with no dots or arrows — see Troubleshooting.
Getting set up
Step 1: Open the page or post
Open the page or post where you want the carousel, in the block editor.
Step 2: Add the wrapper shortcode
Add a Shortcode block containing [content-slider] … [/content-slider].
Step 3: Add a slide for each item
Inside the wrapper, add one [content-slide title="…"]…[/content-slide] shortcode per slide. Each slide's title becomes the label on its navigation dot — it is not shown as a heading on the slide itself.
Type the whole thing on one line, with no line breaks between the shortcodes. A line break between two slides turns into an extra, empty slide.
[content-slider navigation="true"][content-slide title="Open Morning"]Join us on Friday 10 October for tours of the school.[/content-slide][content-slide title="Sports Day"]Sports Day is moving to Friday 12 June, weather permitting.[/content-slide][content-slide title="New Term"]The new term starts on Monday 6 January.[/content-slide][/content-slider]
Step 4: Publish and check the website
Publish the page and view it on the front end.
Features
Where to find it: typed directly into a page or post's content — there is no settings screen.
[content-slider autoscroll="true" delay="5000" navigation="true" linkposition="bottom"][content-slide title="Slide 1"]Your content here[/content-slide][content-slide title="Slide 2"]More content[/content-slide][/content-slider]
| Parameter | What it does | Default |
|---|---|---|
autoscroll |
Auto-advance slides (true/false) |
false |
delay |
How long each slide stays, in milliseconds (1000 = one second), when autoscroll is on. The default is a quarter of a second, so set something like 5000 if you turn autoscroll on |
250 |
navigation |
Show previous/next arrow buttons (true/false) |
false |
linkposition |
Where the navigation dots sit — top or any other value for the bottom |
top |
display |
Extra CSS class added to the slider, for your own styling — it does not change how the slider behaves | Empty |
Navigation dots always show, one per slide, labelled with each slide's title — this isn't optional and isn't controlled by navigation (which only adds the arrow buttons). The carousel loops: after the last slide it goes back to the first.
Use one content slider per page. The settings are shared across the page, so a second slider on the same page would share one set of settings and its navigation labels would be mixed in with the first slider's.
Troubleshooting
The slider shows as a plain stacked list, with no dots or arrows
Why it happens: Realsmart Core, which supplies the slider library, isn't active, or the visitor's browser could not load the slider library (it is loaded from an external content delivery network).
How to fix it: confirm Realsmart Core is active under Plugins. This should not normally happen on a SmartPress site.
There are extra, empty slides or navigation labels
Why it happens: there are line breaks between the [content-slide] shortcodes. Each line break becomes an extra slide with no content.
How to fix it: put the whole slider on one line, with each [/content-slide] followed straight away by the next [content-slide …].
A slide's content runs together, or the carousel doesn't advance
Why it happens: the [content-slide] shortcodes are not nested correctly inside [content-slider]…[/content-slider], or a closing shortcode tag is missing.
How to fix it: check every [content-slide] has a matching [/content-slide], and that the whole block sits inside [content-slider]…[/content-slider].
Did this work for you?
If a step looked different on your site, tell us and we'll update the screenshots.
Thanks for your feedback.