[WordPress] 外掛分享: Gutenslider — Slider Block for the Block Editor

首頁 › 外掛目錄 › Gutenslider — Slider Block for the Block Editor
WordPress 外掛 Gutenslider — Slider Block for the Block Editor 的封面圖片
⚠ 此外掛已下架 — 不再更新維護,建議勿安裝。
10,000+
安裝啟用
★★★★☆
4/5 分(65 則評價)
剛更新
最後更新
100%
問題解決
WordPress 6.6+ PHP 7.4+ v7.3.5 上架:2019-05-14

內容簡介

Gutenslider 是 WordPress 的圖像和視頻投影片外掛程式,可將簡單易用的 Gutenberg 投影片區塊添加到您的 WordPress 編輯器中。您無需使用其他編輯器,而是可以直接在您已經知道和喜愛的 Gutenberg 編輯器中進行管理。您可以添加任何您想要的頂部內容!Gutenslider 比任何其他投影片都更快、更流暢。現在就去試試吧,並使用內容投影片、圖像投影片和視頻投影片來增加網站的用戶參與度,並通過您已經熟悉的 Gutenberg 後端編輯器在幾秒鐘內製作您的投影片,無需研究複雜的後端編輯器。 Gutenslider 是您和您的客戶的最佳選擇。

使用 Gutenslider,輕鬆提升您的博客或網站:

1.從 Gutenberg 後端添加 Gutenslider 區塊
2.從您的媒體庫中選擇圖像
3.添加您喜歡的任何區塊
4.在後端自定義 Gutenslider
5.製作投影片! 👩‍🎤

Gutenslider 易於使用、快速、非常強大,由值得信賴的開發人員開發,並貢獻到 Gutenberg 核心程式庫中。

插件功能

- 添加無限投影片
- 更改過渡模式:褪色、滑動、翻轉
- 在頂部添加任何區塊
- 區塊對齊:寬、全
- 內容對齊:上、中、下、左、右
- 固定內容/變更內容
- 投影片顯示:自動或 1
- 開啟/關閉箭頭
- 箭頭大小
- 3 種箭頭顏色
- 開啟/關閉圓點
- 圓點大小
- 3 種圓點顏色
- 上/下和左/右間距
- 上/下和左/右邊距
- 自動標題
- 全屏投影片(投影片將位於您內容的背景中)。
- 因為它是 Gutenberg 區塊而非後端編輯器,因此非常易於使用-無需離開您的後端編輯器
- 超連結投影片
- 簡單的 lightGallery 集成
- Webp 支持
- Hash 導航
- 自定義投影片 CSS

插件 Pro 功能 💎

- 視頻投影片:將視頻添加到您的幻燈片背景中
- 視差投影片
- 5 種過渡模式:褪色、滑動、翻轉、coverflow、立方體、卡片
- 過渡時間
- 幻燈片時間
- 幻燈片顏色覆蓋
- 幻燈片漸變覆蓋
- 幻燈片之間的間距
- 批量編輯
- 箭頭顏色/箭頭背景顏色
- 高級箭頭樣式
- 從 10 種風格中選擇或添加您自己的 SVG

外掛標籤

開發者團隊

⬇ 下載最新版 (v7.3.5) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Gutenslider — Slider Block for the Block Editor」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

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.
Show one slide at a time for a hero or a fullscreen background, or several side by side as a carousel: for photos, videos, testimonials or team members, laid out with blocks.

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.

Features

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.

Speed and accessibility
The front end uses the Interactivity API. The slider’s layout is rendered on the server, so the page does not shift when the script starts. Swiper and the modules a slider needs load only when the slider comes near the viewport. Images get responsive 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.

Source code
The JavaScript and CSS in 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.

External services
The free plugin makes no requests to other servers on its own: no tracking, no remote fonts or scripts, and nothing is sent from your site unless you allow it on the opt-in screen (see Freemius below). Slide images and videos come from your own Media Library; only video slides from links, which you add yourself, contact the video’s platform (see below). On the page, a platform’s player loads only when its slide is shown or its play button is clicked; from then on that platform receives the visitor’s IP address and browser data, as with any embedded video. Pages without such slides contact nothing.
Freemius (opt-in, and licensing for Gutenslider Pro). Gutenslider includes the Freemius SDK. After you activate the plugin, it asks once whether you want to opt in. Only if you click “Allow & Continue”, your WordPress user’s name and email address, the site’s address and title, the WordPress, PHP and plugin versions, the site language, and whether the plugin is active or uninstalled are sent to Freemius, so we can tell you about security and feature updates; the list of your plugins and themes and the newsletter are separate choices on that screen. “Skip” sends nothing, and you can opt in or out later with the link in the plugin’s row on the Plugins screen. If you buy Gutenslider Pro or activate a Pro license, your license key, site address, and the WordPress, PHP and plugin versions are sent to Freemius to check the license and deliver updates. Terms, Privacy
YouTube (only for YouTube slides). When you add YouTube links in the editor, your site asks YouTube for the video titles and sizes (youtube.com/oembed), reads the newest videos of a playlist from its public feed (youtube.com/feeds/videos.xml), and saves the video thumbnails (i.ytimg.com) to your Media Library. With Pro, playlists and channels are read from their pages (youtube.com/playlist, the channel page), and youtube.com/shorts/… tells which videos are Shorts. On the page, a YouTube slide without a saved thumbnail shows YouTube’s thumbnail from i.ytimg.com, and the player is loaded from youtube-nocookie.com when the slide is shown or played. Terms, Privacy
Vimeo (only for Vimeo slides). When you add Vimeo links in the editor (Pro), your site asks Vimeo for the video titles, sizes and thumbnails (vimeo.com/api/oembed.json), reads the video list of a user, channel or showcase from its public feed (vimeo.com/…/rss), and saves the thumbnails (i.vimeocdn.com) to your Media Library. On the page, the Vimeo player is loaded from player.vimeo.com, with “do not track” (dnt=1). Terms, Privacy
Dailymotion (only for Dailymotion slides). When you add Dailymotion links in the editor (Pro), your site asks Dailymotion’s public API (api.dailymotion.com) for the videos’ titles, sizes and thumbnails, and the video list of a user or playlist, and saves the thumbnails (dmcdn.net) to your Media Library. On the page, the Dailymotion player is loaded from geo.dailymotion.com. Terms, Privacy
TikTok (only for TikTok slides). When you add TikTok video links in the editor (Pro), your site asks TikTok for the video’s title and thumbnail (tiktok.com/oembed) and saves the thumbnail (tiktokcdn.com) to your Media Library. On the page, TikTok’s embed player is loaded from tiktok.com/player. Terms, Privacy
Video files from links. A slide can play a video file from another site; your site checks the link’s type once (a HEAD request) when you add it, and visitors’ browsers load the file from that site.

延伸相關外掛

文章
Filter
Mastodon