Coverflow Slider

What the coverflow effect does

The Slider layout offers three effects. Slide pushes the whole strip sideways. Fade cross-fades one image at a time. Coverflow keeps the neighbouring slides on screen and tilts them back behind the active one, so the current photo reads at full size while the next and previous sit angled at its edges.

Pick it when the carousel is the first thing on the page, a hero band or a short set of featured photos. The plain Slide effect suits a carousel further down a long page, where a tilted stack would pull attention off the text around it. This demo runs two slides per view, a 0.4 second transition and Loop on.

Speed, height and the rest of the panel

Everything below lives in the block sidebar once Layout is set to Slider.

• Effect holds Slide, Coverflow and Fade, and a new block starts on Slide. Fade hides Slides Per View and Centered Slides. Coverflow keeps both.
• Speed (in Seconds) accepts 0 to 5 in steps of 0.1, default 0.3. This demo uses 0.4.
• Autoplay (in Seconds) runs 0 to 60 and starts at 6. At 0 the carousel moves only when a visitor moves it. Pause on Mouse Over turns up once autoplay is above zero.
• Items Height is Auto, which follows the image ratio, Static at a fixed 30 to 800 px, or Dynamic, a percentage of the slide width from 10 to 300. Dynamic is the default at 80. The carousel here sets 120.
• Items Minimal Height takes any CSS length, and 100vh gives a full-screen carousel. A vh value does not render in the editor preview.
• Slides Per View is Auto or a number from 1 to 6, default 3. Centered Slides, on out of the box, holds the active slide in the middle rather than at the left.
• Arrows start on, bullets and Loop off. Gap between slides runs 0 to 200 px, default 15. Vertical Gap does nothing here.

Three steps to a coverflow slider

1. Add the Visual Portfolio block to a page and pick Images in the setup wizard. Upload the photos or take them from the Media Library, then drag them into the order the carousel should follow.
2. Open the Layout panel in the block sidebar, switch it to Slider and set Effect to Coverflow. Two or three slides per view keeps the angled neighbours visible. Turn Loop on to run past the last photo back to the first.
3. Fade is the skin a new block already starts on, so the last stop is Click Action. Set it to Popup, then check Title Source and Description Source. A wizard-built gallery uses Item Title and Item Description, which read the gallery item rather than the attachment.

What Pro adds to a slider

Coverflow needs no license. The Slider layout, every value listed above and the lightbox the slides open into all ship in the free plugin. What Pro adds sits around the carousel. The free versus Pro table has the full split, and the pricing page the cost of a license.

• Move Overlay Under Image, which this demo uses so the caption still reads on a phone, where hover never fires.
• Custom breakpoints under Settings, General. They move the widths at which Slides Per View steps down.
• Deep Linking, on by default. An open slide gets its own address in the form #&gid=GALLERY&pid=PICTURE.
• Loop inside the lightbox, plus Load Next Pages, which reads the next page of a paginated gallery while a visitor browses.

Questions about coverflow sliders

Why does the slider show fewer slides than I set?

Slides Per View steps down as the screen narrows. A slider set to 2, like this one, holds two slides to 577 px and drops to one under that. Set to 3, it keeps three to 769 px and two between 577 and 768 px. The five widths the ladder runs on are in responsive behaviour.

Fancybox or PhotoSwipe for the popup?

Both ship with the plugin, and the choice is one site-wide setting rather than a per-block one. Fancybox is the default, and the only one with a thumbnail strip and a slideshow. PhotoSwipe is lighter. Arrows, counter, zoom, fullscreen, share, download and deep linking work in both, as Fancybox or PhotoSwipe sets out.

How do I make the slider full width?

Select the block, open the alignment toolbar and pick Wide width or Full width. How wide either really is depends on the theme. A carousel placed as a Saved Layout uses a different switch, Stretch in General Settings. See the full width answer.