About the Slider Widget
Zyff's slider widget builds a rotating banner for any website, free. Each slide carries an image, a headline, some supporting text and a button — as a full-bleed hero with the text over the picture, a split layout with image beside copy, a card, or text alone for an announcement. It advances on its own, pauses while the tab is hidden, and does not animate at all for visitors who have asked for less motion. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add an image slider to your website
Write your slides
Each one takes a headline, some supporting text, an image and a button. The button only renders once it has both its text and a link.
Pick a layout
The hero puts text over a full-bleed image, the split sets image beside copy, the card stacks them, and the text-only layout drops the image entirely.
Set the scrim
On a hero slide, the scrim is what keeps a headline readable over a photo. It looks unnecessary on a dark test image and essential on a bright one.
Copy the embed code
Paste the container div and script tag where the banner should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the Slider Widget does
Four slide shapes
A full-bleed hero, image beside copy, a stacked card, and text alone. All four page through the same controls.
A scrim that keeps text readable
The hero layout lays an adjustable wash over the image, so a white headline stays legible whatever photo goes behind it — the difference between a banner that works on your test image and one that works on every image.
Autoplay that behaves
It pauses while the tab is hidden, so a visitor returning to your page finds the slider roughly where they left it rather than somewhere arbitrary, and it does not autoplay at all for visitors who ask for reduced motion.
Arrows, dots, swipe and keyboard
Paging works by every means a visitor might reach for, and the dots show how many slides there are so nobody misses the last one.
Always one slide at a time
A slider showing three slides at once is a carousel. That is enforced rather than configured, so a hand-edited snippet cannot turn one into the other.
Nothing to slow your page
The widget runs in the visitor's browser from the settings in your snippet, makes no request to Zyff when your page loads, and every slide image loads lazily.
At a glance
| Slides | Up to 20, each with an image, headline, body, button text and link |
|---|---|
| Layouts | 4 templates: hero, split, card, text only |
| Height | 160 to 640px |
| Autoplay | 2 to 20 seconds per slide, or off |
| Scrim | 0 to 90% over the hero image, in any colour |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add an image slider to my website?
Write your slides in Zyff's builder, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.
How many slides should a slider have?
Two or three. Past four, most visitors never see the last one — a rotating banner competes with itself for attention, and every slide after the second is seen by a fraction of the people who saw the first. If you have more to say, a slider is usually the wrong shape for it.
Why is there a scrim over my hero image?
Because you have not chosen the final photo yet, and a white headline over a bright sky is unreadable. The scrim is an adjustable wash between the image and the text, and it is the single setting that decides whether the banner works on every image or only on the one you tested with.
Does the slider keep advancing in a background tab?
No. Autoplay pauses whenever the tab is hidden, so a visitor who leaves your page open and comes back finds the slider roughly where they left it. It also does not autoplay at all for visitors whose system asks for reduced motion.
Can visitors swipe it on a phone?
Yes. The track is a native scroll container with snap points, so swiping works exactly as visitors expect, and the arrows and dots keep working alongside it. Arrow keys page it for keyboard visitors.
Is a slider bad for page speed?
It can be, if the images are unresized. The widget itself makes no request to Zyff and loads each slide's image lazily, so the cost is almost entirely whatever you upload. A hero image around 1600px wide is usually the right compromise.
Can I show more than one slide at a time?
No, deliberately. A slider showing three at once is a carousel, and Zyff has separate widgets for that shape — the testimonials and photo gallery widgets both page through multiple items. Keeping them distinct means each does its own job properly.
Where do I paste the slider embed code?
Wherever the banner should appear — usually near the top of a home page, or above a product listing. Put the container div in that spot and keep the script tag with it.
Is the slider widget really free?
Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small \"Slider by Zyff\" link, which is how the tool stays free. The hero and text-only layouts are free, and so is autoplay: a slider that cannot rotate is a banner. A paid plan adds the split and card layouts, full colour control and removes the attribution link.