內容簡介
Twenty20 是由 Zurb 團隊開發的 TwentyTwenty 腳本的 WordPress 外掛。
這啟發了我們一些新的想法，如何為我們自己的需求做類似的兩張圖片之間滑動來顯示「之前」和「之後」的效果，最重要的是，它必須是響應式的。
實際演示
特點
支持所有設備的響應式和功能性。
無需圖像即可運行。
簡單干淨的用戶界面
在小工具上添加「之前」和「之後」效果。
支持流行的網頁生成器。
支持 WP 圖像 alt 作為圖像 alt 和標題。
支持的網頁生成器
WP Bakery Visual Composer。
Elementor Page Builder。
UX Builder by UXThemes。
快速示例
[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="之前" after="之後" hover="true"]
簡碼參數
img1 – 圖像 ID。
img1 – 圖像 ID。
offset – 0.1 至 1.0。
direction – horizontal|vertical。
align – none|right|left。
width – 支持 px 和 % 兩種格式。
before – 文字。
after – 文字。
hover – true 或 false。
視頻演示
外掛標籤
開發者團隊
原文外掛簡介
Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:
Photography portfolios
Real estate before/after
Renovation projects
Design makeovers
Product comparisons
Restoration work
Medical procedures
And much more!
Video Tutorial
Live Demo
Check the Live Demo.
Key Features
Responsive design – works perfectly on all devices
Horizontal and vertical sliding options
Customizable slider position and orientation
Custom “before” and “after” labels
Adjustable image widths and alignments
Mouse hover sliding effect
Touch-enabled for mobile devices
Multiple sliders per page
Widget support for sidebars
SEO-friendly with proper alt tag support
Accessibility compliant image comparisons
Page Builder Support
Elementor
WPBakery Page Builder (Visual Composer)
Flatsome UX Builder
Classic Editor
Perfect For
Photography before/after edits
Home renovation comparisons
Web design makeovers
Product transformations
Restoration projects
Beauty transformations
Real estate renovations
Usage
Shortcode Example
Quick Example
[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]
Shortcode Parameters
img1 – image ID.
img2 – image ID.
offset – range from 0.1 to 1.0.
direction – horizontal|vertical.
align – none|right|left.
width – supports both px and %.
before – text for the “before” label.
after – text for the “after” label.
hover – true or false.
