內容簡介
WP Swiper Gutenberg Block 是最現代化的免費手機觸摸式滑塊，具有硬體加速轉換和驚人的本機行為。它旨在用於移動網站、移動 Web 應用程序和移動本機/混合應用程序。
訪問官方網站
新功能和建議聯繫我
!!! 重要 !!!
我內部使用此外掛程式建立精彩的滑塊。目前僅提供必要的 Swiper 選項。更多功能即將推出！
如果您急需某項功能，請與我聯繫。
如果您是設計師，並且有一個介面設計想法，請讓我知道。
後端用戶介面目前不是最美觀的東西。但它非常直觀且可以完成任務！該界面設置為一系列選項卡，每個選項卡控制一個幻燈片。單擊選項卡，您可以上傳圖像。單擊 WP Swiper 區塊，您可以控制幻燈片覆蓋圖層和彩色覆蓋圖層。
關於後端用戶介面的另一個備註，最初的想法是在編輯器內生成功能性滑塊。但是，conteneditable HTML 元素存在問題。我在官方 swiper github 存儲庫上提交了一個問題，要求他們解決問題。留下評論以優先解決。
如果要使用帶有文字的幻燈片。
選擇幻燈片，添加圖像，該圖像將在前端作為背景顯示。
如果要使用圖像滑塊，只需添加一個常規圖像區塊即可。
功能：
為整個滑塊添加圖像覆蓋層+控制不透明度
為整個滑塊添加彩色覆蓋層+控制不透明度
將圖像添加到滑塊中
將內容（文本、標題、任何東西）添加到滑塊中
為每個滑塊位置設置內容
即將添加更多功能：
控制滑塊高度
動畫效果
其他來自官方 swiper 文檔的功能
外掛標籤
開發者團隊
📦 歷史版本下載
原文外掛簡介
WP Swiper Gutenberg Block is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. This powerful plugin is designed to be used in mobile websites, mobile web apps, and mobile native/hybrid apps, providing you with a range of features and customization options to help you create stunning slideshows, image galleries, and more.
Features:
Use any block available in Gutenberg to create your slider
Hardware accelerated transitions for fast and smooth animations
Customize every aspect of your slider, including navigation and pagination options, autoplay settings, and more
Mobile-first design ensures your sliders look great on any device
Multiple slide layouts to choose from, including horizontal and vertical options
Dynamic content support, including support for video slides and dynamic image sources
Easy to use and beginner-friendly, with a user-friendly interface and intuitive controls
Built with performance in mind, ensuring your sliders load quickly and efficiently
WP Swiper Gutenberg Block is the ultimate tool for creating visually stunning displays on mobile devices. Whether you’re creating a mobile website, mobile web app, or mobile native/hybrid app, WP Swiper Gutenberg Block has everything you need to create beautiful and engaging slideshows, image galleries, and more.
Download WP Swiper Gutenberg Block today and take your mobile displays to the next level!
Support my work and fuel my creativity by buying me a virtual coffee on BuyMeACoffee
New Features and suggestions Contact Me
BETA TESTING
We’re actively developing new features and improvements for WP Swiper! Beta versions are available for testing, and we’d love your feedback to help make the plugin even better.
How to participate:
1. Download and install the latest beta version
2. Test the new features in your environment
3. Report any issues or provide feedback on our GitHub repository
Report Issues & Feedback:
Found a bug or have suggestions? Please submit them here: https://github.com/andreyc0d3r/wp-swiper/issues
Your feedback is invaluable in helping us improve WP Swiper for everyone!
NEW RELEASE
WP Swiper version 1.2.0 is now live! This update introduces major changes, including a streamlined configuration with the new data-swiper attribute, a new WP Swiper Settings page, optimized asset loading, and more. Please note that the legacy configuration method will be deprecated in future releases.
For more details on what’s new and how to migrate, check out the full update announcement on the WP Swiper Blog.
wpswiper_frontend_js_register_args Filter
The wpswiper_frontend_js_register_args filter allows users to customize parameters when enqueueing the frontend-js script. This filter enables you to modify the script’s dependencies, control whether it loads in the footer, and specify additional loading strategies such as async or defer.
Parameters
deps: (array) The script dependencies for frontend-js. Default value is ['wpswiper-bundle']. You can modify this to include additional dependencies or remove existing ones.
args: (array|bool) An optional array for additional script loading strategies. If provided, it may be an array with a strategy key (set to either 'async' or 'defer'). If not specified, it defaults to false, indicating that no special loading strategy is applied.
For more information, read the WordPress documentation on wp_enqueue_script.
Example Usage
To modify the default values, add the following code to your functions.php file or your custom plugin:
add_filter('wpswiper_frontend_js_register_args', function($args) {
// Modify script dependencies
$args['deps'] = ['wpswiper-bundle', 'jquery', 'your-custom-dependency'];
// Specify an additional loading strategy, such as async or defer
$args['args'] = [
'in_footer' => false,
'strategy' => 'defer'
]; // Options: 'async' or 'defer'
return $args;
});
This filter provides flexibility in how the frontend-js script is loaded, allowing for optimizations tailored to your specific site needs.
API Parameters
Loop Parameters
loopAddBlankSlides
Type: boolean
Default: true
Description: Automatically adds blank slides if you use Grid or slidesPerGroup and the total amount of slides is not even to slidesPerGroup or to grid.rows
loopAdditionalSlides
Type: number
Default: 0
Description: Allows to increase amount of looped slides
!!! IMPORTANT !!!
I use this plugin internally to build awesome sliders. At the moment only essential Swiper options are available. More to come!!!
If you urgently need a feature, please reach out to me.
If you are a designer and have an interface design in mind, let me know.
The backend UI is not the prettiest thing at the moment. But it’s very intuitive and does the job! The interface is set up as a series of tabs, each tab controls a slide. Click on the tab and you may upload an image. Click on the WP Swiper block and you can control slider overlay + color overlay.
Another note re: backend UI, the original idea was generate the functional slider within the editor. But theres an issue with conteneditable HTML elements. I lodged an issue on official swiper github repo for them to resolve. Leave a comment for them to prioritise the solution.
If you want to use the slide with text.
Select slide, add image, the image gonna appear as a background on the frontend.
If you want to use the slider for images, just add a regular image block.
Features:
Add image overlay for the whole slider + control opacity
Add color overlay for the whole slider + control opacity
Add image to the slider
Add content (text, headings, anything…) to the slider
Position content for each slider
More Features to be added:
Control height of the slider
Animations
Other features from the official swiper docs
