The settings of the slider block (the whole slider) and the slide block (one slide) in Gutenslider 7.0, grouped the way the sidebar groups them. Pro settings are marked. Settings with a device switch can be set per device, see Responsive settings.
General
| Setting | What it does | Default |
|---|---|---|
| Content | Per slide (blocks on each slide) or Same on all (one set of blocks over all slides). See content modes. | Per slide |
| Alignment | None, wide or full width, from the block toolbar. | None |
| Content position | Where the content sits on the slides: a 3 × 3 matrix in the toolbar. Set on the slider, it applies to all slides at once. | Center |
| Slides in view | How many slides are visible at once, up to eight per device, or width from content so each slide keeps its own width. | 1 |
| Slides per step | How many slides one arrow click moves. | 1 |
| Space between slides | Gap in pixels between visible slides, per device. | 0 |
| Center the active slide | Keeps the active slide in the middle when several are visible. | On |
Height
| Setting | What it does | Default |
|---|---|---|
| Minimum height | The slider is never lower than this, per device. Any CSS length: 50vh, 400px, 30rem. | 50vh |
| Grow with content | The slider changes its height to fit each slide (adaptive height), per device. Useful for slides with different amounts of text. | Off |
| Full screen height | The slider fills the height of the screen. | Off |
| Padding and margin | Space between the slider’s edge and the content, and around the slider, per device. | 40px (20px on phones) |
Arrows and dots
| Setting | What it does | Default |
|---|---|---|
| Arrows | Show the previous / next buttons, per device. | On |
| Arrow style | Eleven arrow shapes in a style picker. | Style 1 |
| Arrow size and colors | Size per device; arrow, background and their hover colors. | 30px, white |
| Arrow position (Pro) | At the sides, at the top or bottom, in a corner, or following the pointer: the arrow moves with the mouse over the slider and shows which way a click goes. | Sides |
| Arrow offsets, spacing, blend mode (Pro) | Fine offsets per device, space between the two arrows, and a blend mode so the arrows stay visible on light and dark photos. | 10px, none |
| Dots | Show the pagination, per device, with size and color. | On, 25px, white |
| Pagination type (Pro) | Dots, dots a few at a time, numbers (“2 / 5”) or a progress bar. | Dots |
| Dot style (Pro) | Dots, Pill (the active dot stretches into a pill and the highlight slides over to the next one) or Lines with progress (short lines; the active one fills up over the time per slide). See them on the examples page. | Dots |
| Dot position and offset (Pro) | Eight places around the slider, and the distance from the edge per device. | Bottom, 10px |
Autoplay and loop
| Setting | What it does | Default |
|---|---|---|
| Autoplay | Moves to the next slide on its own. | On |
| Pause on hover | Autoplay waits while the pointer or keyboard focus is on the slider. | On |
| Loop | After the last slide comes the first one again. | On |
| Arrow keys change slides | Keyboard navigation while the slider is on screen. | On |
| Time per slide (Pro) | Seconds a slide stays before the next one. | 3 s |
| Transition time (Pro) | Seconds the change from one slide to the next takes. | 0.7 s |
With “reduce motion” turned on in the visitor’s operating system, Gutenslider 7.0 does not autoplay, parallax stays still and WebGL transitions become a crossfade.
Effects
The effect decides how one slide replaces the next.
- Slide and Fade: in the free plugin.
- 3D (Pro): Coverflow, Cards, Cube and Flip. Cards, Cube and Flip show one slide at a time.
- Shaped (Pro): Morph, Parallax, Tilt, Fan, Stack and Reveal. Slides change shape as they move, with CSS only.
- WebGL transitions (Pro): Liquid, Displace, Ripple, Warp, Swirl, Kaleidoscope, Lens, Fluted glass, Zoom, Push, Fold, Wind, Burn, Pixelate, Mosaic, Blocks, Glitch, Signal, Datamosh and Chroma. Drawn on the graphics card over a crossfade, one slide at a time. Without WebGL or with reduced motion the slides crossfade.
See them side by side on the examples page: slide, fade and 3D, shaped and WebGL. In the editor, the Preview button plays the effect.
Parallax backgrounds (Pro) move the backgrounds slower than the page while you scroll. Choose the direction and the amount.
Shape dividers
A shape at the top or bottom edge, usually in your page’s background color, so the slider blends into the next section. Fifteen shapes (wave, tilt, curve, triangle and more), a color and flip are free; the height and the inverted shapes are Pro. Try three of them on the examples page.
Slide backgrounds
Select a slide to set its background:
- Image: any image from the Media Library. Set the focal point to keep the important part visible when the slider is cropped on a phone, and choose the size: cover (fill) or contain (show the whole image).
- Video: a video from the Media Library, playing inline. Loop, muted and pause when inactive are on by default; add a poster image so something shows before the video loads, and a focal point.
- Color and gradient: for text-only slides such as quotes or announcements.
- Overlay: a color or gradient over the image or video, with an opacity, so white text stays readable on light photos.
Content blend mode and content opacity (Pro) change how the blocks on a slide mix with the background.
Automatic captions
Every slide can show its image’s title, caption or description from the Media Library, set once for all slides (Captions from the Media Library). See Automatic captions.
Links
A slide can link somewhere as a whole: select the slide and enter a URL (optionally opening in a new tab). Buttons and links inside the slide’s blocks work as usual too.
Link to each slide (hash navigation) gives every slide an address such as #slide-3, so a link can open the page on that slide. Set your own link prefix to get addresses like #city-3. See Link to a single slide.
Lightbox
A click on a slide’s image opens it in a lightbox that grows out of the image, in a light or dark look. Pro adds thumbnails, zoom, captions, a fade opening and your own colors. See Lightbox.
Visibility
Show the slider on hides the whole slider on desktop, tablet or phone, for example to show a lighter slider on phones. A single slide can be hidden without deleting it.