# Slider Widget

> Build a free image slider for any website — hero banner, split layout or card. Autoplay, arrows and dots, reduced-motion aware. Copy the embed code, no signup.

- Canonical URL: https://www.zyff.app/widget-builder/slider
- Status: working
- Price: free to build and embed, no signup, no watermark; saving a widget so it can be edited later needs an account, and the paid plans raise the saved-widget and monthly-view ceilings — see https://www.zyff.app/pricing
- Processing: runs on Zyff's servers; input is held in memory for the request and never stored

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

1. **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.
2. **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.
3. **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.
4. **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.

## Features

- **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.

## Specifications

| Property | Value |
| --- | --- |
| 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.

## Related tools

- [Photo Gallery Widget](https://www.zyff.app/widget-builder/photo-gallery): A photo gallery with a lightbox, in four layouts.
- [Portfolio Widget](https://www.zyff.app/widget-builder/portfolio): A filterable grid of your work, with a lightbox.
- [Announcement Bar Widget](https://www.zyff.app/widget-builder/announcement-bar): Pin a notice to the top or bottom of every page.
- [Before and After Slider](https://www.zyff.app/widget-builder/before-after): Two photos in one frame, revealed by a divider visitors drag.