Gutenslider — Slider Block for the Block Editor
| 开发者 |
eedee
wordpressslider freemius gutenbergslider |
|---|---|
| 更新时间 | 2026年10月23日 05:53 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
标签
下载
2.8.10
5.10.1
2.8.9
2.9.0
2.9.1
3.0.6
4.0.0
4.0.1
4.0.2
4.0.3
4.0.4
4.2.2
4.3.0
4.3.1
4.3.3
4.3.8
4.4.0
4.4.1
4.4.10
4.4.12
4.4.13
4.4.3
4.4.4
4.4.6
4.4.7
4.4.9
4.3.9
4.3.6
5.5.1
5.8.0
2.9.5
5.1.2
5.5.5
5.5.7
4.4.11
5.0.3
5.0.5
5.0.6
5.0.7
5.0.8
5.0.9
5.0.11
5.0.12
5.0.15
5.0.16
5.0.17
5.0.18
5.1.0
5.1.5
5.2.3
5.3.0
5.3.2
2.6.5
5.1.4
5.3.1
5.4.0
5.4.2
5.4.3
4.3.7
5.4.4
2.7.0
3.0.0
3.0.1
4.3.2
5.0.13
5.1.1
5.4.5
5.5.0
5.5.3
2.6.7
4.3.4
4.3.5
5.5.2
5.5.4
5.5.6
2.6.6
4.5.1
5.6.1
5.9.0
5.9.3
2.6.4
5.2.0
5.2.1
5.2.2
5.4.6
5.6.0
5.8.1
5.8.2
5.8.3
5.8.4
2.8.0
2.8.3
5.0.10
5.10.0
5.9.1
5.9.4
5.9.5
2.6.3
2.8.11
4.5.2
5.1.3
5.10.2
5.7.0
6.1.0
2.9.2
1.0.0
2.8.8
3.0.5
3.0.7
4.4.5
5.9.2
6.1.1
6.1.2
7.2.0
7.2.1
7.2.2
详情介绍:
Gutenslider adds a slider block to the block editor. Each slide has a background (image, video, color or gradient) and holds any blocks you like on top: headings, paragraphs, buttons, columns. You build and style the slider where you write your content, and the editor shows it the way visitors will see it.
Examples and documentation
How to use it
- In the block editor, add a Gutenslider block.
- Pick images or videos from the Media Library. Each one becomes a slide.
- Select a slide and add blocks on top of it, or keep one set of content fixed above all slides.
- Choose the transition, arrows, dots, height and autoplay in the block settings, per device (desktop, tablet, mobile).
- Publish.
- Unlimited slides with an image, a video from the Media Library or from a link, a color or a gradient as background, a focal point for each image and video, and a color or gradient overlay.
- Video sliders from links: paste YouTube video or playlist links, or links to video files (.mp4, .webm, .mov, .ogv), and every video becomes a slide. For playlists (the newest 15 videos, from the playlist's feed): how many, in which order, with or without YouTube Shorts. The slide on screen plays (muted, or with sound after a click), the others pause and show their thumbnail; each slide keeps its video's shape (16:9, or upright for Shorts). Works with several slides per view and centered slides.
- Videos play when their slide shows (a slider setting, and per slide), the slider's autoplay waits for a playing video, and the videos of a slider share their sound: mute or turn up one, and the others follow.
- On small screens the arrows and dots fade while a video plays, so they don't cover the player's controls, and come back on any touch, pointer movement or keyboard focus.
- Any blocks on top of a slide.
- Two content modes: content per slide, or the same content on all slides while the backgrounds change.
- Transitions: slide, fade and flip, with transition time and time per slide.
- Up to eight slides per view (or automatic width), slides per step, space between slides, loop, centered slides, random order, autoplay with pause on hover.
- Arrows in eleven styles or as text ("Previous", "Next" in the site's font), and dots, with size and colors; on or off per device.
- Arrow positions (sides, next to the blocks below or above the image, top and bottom, corners), offsets, spacing and blend mode; dot positions (bottom, top, left, right) and an offset.
- Settings per device (desktop, tablet, mobile): slides per view, height, arrows, dots and visibility.
- Slider height in px or vh, height that grows with the content, wide and full alignment, and a full-screen mode.
- Content position (top, center, bottom, left, right), and the slide's blocks on the image, below it or above it.
- Shape dividers at the top and bottom, in fifteen shapes, with color, height, flip and invert.
- Linked slides, keyboard navigation and hash navigation (a link can open a specific slide).
- Image slides can link to their image file, for lightbox plugins that open linked images (one gallery per slider with Lightbox with PhotoSwipe).
- A lightbox for the slide images and videos, and for Image and Video blocks on the slides: it opens out of the image (or fades in), pages with arrows, keyboard and swipe, shows a counter, thumbnails and a heading and text from the image's title, caption or description, and comes in light, dark or your own colors.
- Blend modes and opacity for the content on the slides.
- Automatic captions from the Media Library; slides can be hidden.
- A Preview button in the editor that runs the slider as visitors see it.
srcset and sizes; the first visible image loads with high priority, the others lazily. Arrows and dots are buttons with labels, slides are announced as slides, and autoplay respects "reduced motion".
Gutenslider Pro
Pro adds more ways to design the same block: see what Pro adds
- 3D transitions: coverflow, cards and cube.
- Six shaped effects (morph, parallax, tilt, fan, stack, reveal) and twenty WebGL transitions (liquid, ripple, swirl, fluted glass and more).
- Scroll parallax for the backgrounds.
- Arrows that follow the pointer.
- Pagination as a few dots at a time, numbers or a progress bar, in the corners too; animated dot styles (pill, lines with progress).
- A lightbox zoom button: a full view where the photo fills the window, then zooms in where you click.
- YouTube playlists up to 100 videos (from the playlist page), and Shorts recognized from any link.
- More video sources for "Add videos": YouTube channels (@handle, up to 100 of the latest uploads), Vimeo (videos, unlisted ones too, users, channels, showcases), Dailymotion (videos, users, playlists) and TikTok (video links, several at once; TikTok profiles cannot be read), with their players.
build/ are compiled from the human-readable sources in src/, which ship with the plugin, together with the build setup (package.json, package-lock.json, webpack.config.js). To rebuild them: npm ci && npm run build (uses @wordpress/scripts).
Open source libraries
- Swiper 14.3.0 (MIT) for the slide transitions, bundled from npm; source: github.com/nolimits4web/swiper.
- Freemius SDK (GPL) for Pro licenses.
安装:
- In the admin, go to Plugins → Add New, search for "Gutenslider", then click Install and Activate.
- Open a post or page in the block editor and add a Gutenslider block.
- Pick images or videos for the slides, then add blocks on top.
gutenslider folder to /wp-content/plugins/ and activate the plugin on the Plugins screen.屏幕截图:
常见问题:
Which blocks can I put on a slide?
Any block. Headings, paragraphs, buttons and columns are the most common. If a block from another plugin needs extra styling on a slide, ask in the support forum.
Does it work with my theme?
Yes. Gutenslider works with block themes and classic themes that use the block editor. The content on a slide uses your theme's fonts, colors and spacing.
I used Gutenslider 6. Do my sliders still work?
Yes. Sliders made with 5.x and 6.x keep their settings and class names, so your custom CSS keeps matching. The lightbox now uses a native dialog; nothing needs to be changed.
Is Gutenslider free?
Yes. Everything listed under Features is free, with no limits and no license. Gutenslider Pro is a separate plugin that adds the features listed under Gutenslider Pro.
Can I have Gutenslider in my language?
You can help translate Gutenslider at translate.wordpress.org. Accepted translations are delivered to every site automatically.
更新日志:
7.2.2
2026-10-22
- Now free: the flip effect, transition time and time per slide, arrow positions, offsets, spacing and blend mode, dot positions and offset, divider height and invert, lightbox thumbnails, heading and text, the fade opening and lightbox colors, and blend modes and opacity for the slide content.
- Gutenslider Pro's features are in Pro's own code only: coverflow, cards and cube, the shaped and WebGL effects, numbers, progress bar and a few dots at a time, the pill and line dots, scroll parallax, arrows that follow the pointer, the lightbox zoom and the Vimeo, Dailymotion and TikTok players. The free plugin does not check for a license anywhere.
- The free plugin reads YouTube playlists from their public feed (the newest 15 videos) and tells Shorts apart by the feed; Pro reads the playlist page (up to 100) and finds Shorts from any link.
- A slide whose video comes from a platform without a player here shows its poster.
- Fix: a slider with a spacing preset as block gap no longer needs PHP 8 (works on PHP 7.4 again).
- Updated Swiper to 14.3.0; build/ no longer keeps chunks from earlier builds.
- The plugin ships its build setup (package.json, package-lock.json, webpack.config.js) next to the sources in src/.
- Updated the Freemius SDK to 2.13.5.
- New: "Content width" (Slides panel): Wide or Content lines the slides' blocks up with the theme's wide or content width, like the header and the page's text, while the background stays full width. Per slide and "Same on all" alike.
- In the editor the first click on a slider selects the slider, not the slide or block under the pointer; the next click reaches them.
- Fix: photos chosen in the Media Library or uploaded in a new slider become image slides again; since 7.1.0 they turned into empty video slides.
- Fix: in a looped slider with few slides, the copies the loop shows after the last slide take clicks again: the lightbox (with the right photo), links and the video player's controls.
- Fix: arrows that follow the pointer (Pro) show again; the cursor was hidden and no arrow appeared.
- Fix: when YouTube briefly fails to send a playlist page, the newest 15 videos from its feed are kept for 10 minutes instead of an hour, then the whole list is read again.
- New: video slides from links ("Add videos"): YouTube videos and playlists and links to video files; with Pro YouTube channels, Vimeo, Dailymotion and TikTok. How many videos per playlist or channel, in which order, with or without Shorts; the thumbnails are saved to the Media Library once. The player loads for the slide on screen only and pauses when the slide leaves; the slider's autoplay waits for a playing video.
- New: "Play videos when their slide shows" for the whole slider (a slide can set its own), and one sound for all videos of a slider: mute or set the volume in one, the others follow.
- New: on small screens the arrows and dots fade over a playing video, clear of the player's controls, and come back on touch, pointer movement or keyboard focus.
- New: "Link images to the file" (Advanced), for lightbox plugins that open linked images; slides with their own link keep it.
- New: the lightbox also opens Image and Video blocks on slides (image next to text), in slide order with the backgrounds; the zoom cursor shows only on what opens.
- New: the slide's blocks can sit below or above the image instead of on it (Slides panel); the image keeps the minimum height, arrows and dots stay on it. Pro: arrows next to the blocks.
- New: random order (Motion): the slides are shuffled on each visit, also on cached pages, before they show, so the first slide is not swapped.
- New: an arrow style with text labels, "Previous" and "Next", in the site's font and the arrow colors.
- Lightbox zoom (Pro) opens a full view: the photo fills the window by width or height, the other controls hide, a click zooms in there, Escape goes back.
- Fix: replacing a slide's image in the editor shows the new image, not the next slide.
- Fix: "Width from content" works with loop, and on one device only (e.g. auto on phones, three per view on desktops) without a layout shift.
- Fix: dots at the side are centered and clear of side arrows; dots on the right and the progress bar sit at the right; the fraction is centered.
- Fix: arrows next to the blocks stay readable on light backgrounds; text arrows get a soft shadow on photos.
- Front end rebuilt on the Interactivity API (view script module); no jQuery.
- Swiper 14, loaded when a slider comes near the viewport, with only the modules the slider uses.
- The lightbox is a native
<dialog>(keyboard, swipe, focus return, captions, thumbnails); lightGallery was removed. - Parallax uses CSS instead of simple-parallax-js.
- No layout shift: the slider's height and layout are rendered on the server before the script runs.
- Responsive image sizes per breakpoint; the first visible image loads with high priority, the rest lazily.
- Every value in the block markup is escaped; colors and units are validated.
- Both blocks are registered from block.json (apiVersion 3, works in the iframed editor).
- Freemius SDK 2.13, installed with Composer, in anonymous mode with no admin notices or menu pages.
- Removed: the five-star review link on the Plugins screen, the trial offer, and the old admin page.
- Readme: new name and description, External services and Source code sections.
- Requires WordPress 6.6 and PHP 7.4.
- Fix arrow formatting when arrows are disabled.
- Fix chunk names that confused caching plugins.
- Fix a bug when editing sliders.
- Page speed improvements.
- Load only the CSS and JS a slider needs.
- New setting to disable lazy loading on the first image.
- New setting to enable or disable zoom in the lightbox.
- Video slides pause when they are not active (can be disabled).
- Swiper 9.3.2.
- Styles tab for block padding and spacing.
- Freemius SDK 2.6.0.
- Add links to the plugin description.
- Improve compatibility with older Safari versions.