EverWeb has four ways to show photos one after another. For a slideshow that plays by itself across a page, use the Image Slider widget. For slides that mix photos, text, buttons or video on a Responsive page, use the Carousel widget. To have photos change behind your text or inside any box, use a Slide Show Fill. If visitors should see all your photos as thumbnails and click one to open a full-screen slideshow, use a gallery.
When you'd use this
- A hotel wants its home page to rotate through photos of its rooms, each linking to that room's page: Image Slider.
- A café wants a row of cards, each with a photo, a line of text and an Order button, that visitors can swipe through: Carousel.
- A painter moving from iWeb wants each series on its own page, with a slideshow that starts when someone clicks a painting: a gallery.
Which one to use
| Image Slider | Carousel | Slide Show Fill | Responsive Image Gallery / Image Gallery | |
|---|---|---|---|---|
| What it looks like | One photo at a time, with optional thumbnails underneath | Slides of anything: photos, text, buttons, video. Can show several at once | Photos changing behind a TextBox, shape, image or Container | A grid of thumbnails. Clicking one opens a large slideshow over the page |
| Page type | Responsive and Centered Layout | Made for Responsive pages | Responsive and Centered Layout | Responsive Image Gallery for Responsive pages, Image Gallery for Centered Layout |
| Captions | A Caption for each photo | Add a TextBox to the slide | Text you type stays on top of every photo | A Caption for each photo |
| A link on each slide | Yes, URL: for each photo | Yes, each object can have its own link | No, the box changes photos, not links | No, a click opens the large photo |
| Plays by itself | Yes, on to start with | Only if you tick Autoplay | Yes, with Automatically change slides | Once the slideshow is open |
| On phones | Shrinks to fit when set to Full width | Shrinks to fit when set to Full width | Follows the size of the box | Columns rearrange to fit (Responsive Image Gallery) |
Add an Image Slider
- Click the Widgets tab and drag Image Slider onto the page. On a Responsive page, put it directly on the page or in a Container, not in a Responsive Row.
- To run it edge to edge, go to Inspector > Metrics and tick Full width.
- Go to Inspector > Widget Settings and add your photos with Choose….
- Select each photo in the list to type its Caption, its ALT Text (a description for search engines and screen readers) and, if you like, a URL: it links to.
- Under Slide Show Options, keep Auto play slideshow ticked and set Slideshow Speed: in thousandths of a second (4000 is 4 seconds). Choose a Transition: such as fade or slide.
- Under Appearance, untick Show thumbnails for a clean banner, and choose an Image Crop: option. Fill fills the frame and can trim the edges. Fit shows the whole photo.
- Under Behavior, tick Pause on hover or Click to enlarge image if you want them.
Add a Carousel
- Drag Carousel from the Widgets tab onto a Responsive page.
- Drag photos, TextBoxes or Containers into it. Each one is a slide. For a photo with text and a button, put them in a Container Column first.
- In Inspector > Widget Settings, under Slider Options, set Slides per view (0 lets the Carousel decide), a Slide animation such as Fade, Coverflow or Cards, and Loop.
- Under Autoplay Settings, tick Autoplay, set Speed (3000 is 3 seconds) and tick Stop on mouseover if you want it to pause.
Use a Slide Show Fill
- Select a TextBox, rectangle shape, image or Container.
- Go to Inspector > Shape Options, and in the Fill menu choose Slide Show.
- Click Choose… and pick your photos. On an image, add the original photo to the list too.
- Set the Animation, Slideshow speed (ms) and Automatically change slides. While you work, keep Show arrows on Always so you can step through the slides. Set it to Never when you're done if you don't want arrows.
Galleries
Drag Responsive Image Gallery (Responsive pages) or Image Gallery (Centered Layout pages) onto the page and add your photos. Clicking a thumbnail opens a slideshow that can play by itself, like iWeb's "Play Slideshow". See How do I open a popup window or enlarge a photo when someone clicks?
Prepare your photos
- Make them all the same shape and size, for example all 1600 x 900 pixels. Photos of different shapes leave white gaps or make the slideshow change height.
- Keep each one under 500KB, or the slideshow loads slowly on phones. A free tool such as squoosh.app can shrink them.
- Tick Export Optimized Images in File > Edit Publishing Settings so EverWeb publishes smaller WebP copies.
Common problems
| What you see | What to do |
|---|---|
| Photos change size or leave white space | Make them all the same pixel size. In an Image Slider, set Image Crop: to Fill |
| A row of small photos under the slider | Untick Show thumbnails |
| The Carousel doesn't move by itself | Autoplay is off to start with. Tick it under Autoplay Settings |
| You want photos to scroll past without stopping | None of the built-in slideshows do this: each one pauses on every slide |
| Other photos show behind the large photo in a gallery | Use the Responsive Image Gallery and set Slide Show Background Color |
| Too wide on a phone | Tick Full width in Inspector > Metrics, and take it out of any Responsive Row |