內容簡介
此外掛允許您在 WordPress 中使用受歡迎的Swiper.js函式庫。
這是一個極簡主義的外掛程式，用於顯示縮放卡片輪播圖。
在大屏幕設備上，輪播圖將呈現水平卡片（左邊是圖像，右邊是文字）。
在小型設備上，輪播圖會變成堆疊式卡片，圖像在頂部，文字在底部。
請參閱以下截圖以獲得視覺效果，或訪問實時演示。
注意: 使用此外掛程式需要您熟悉 HTML 和 CSS。
使用方法
使用演示 HTML 文件作為起始樣板。將這個 HTML 添加到您的網頁或貼文的 HTML 或程式碼區塊/元素中。
使用以下示例 CSS 添加圖像，創建您自己的圖像樣式。將 CSS 添加到外觀 > 自訂 > 其他 CSS 或您的子佈景主題的style.css文件中。
CSS 示例，以指定縮放卡片輪播圖中的背景圖像：
/**
* Swiper Slider Plugin Custom Styles
*/
#my-swiper-slide-1 {
background-image: url(mybgimg-1.png);
}
#my-swiper-slide-2 {
background-image: url(mybgimg-2.png);
}
#my-swiper-slide-3 {
background-image: url(mybgimg-3.png);
}
鳴謝
由 Swiper.js 驅動。
外掛標籤
開發者團隊
原文外掛簡介
This plugin allows you to use of the popular Swiper.js library in WordPress.
This is a minimalist plugin that is for displaying responsive cards in a slide.
On a large screen device, the slide will show a horizontal card (image on the left and text on the right).
On a small device, the slide becomes a stacked card with the image on the top and text on the bottom.
See the screengrabs below to get a visual or visit the live demo.
Note: You should be comfortable with HTML and CSS to use this plugin.
Usage
Use the demo HTML file as a starter template. Add this HTML to a HTML or code block/element to your page or post.
To add the images, use the example CSS below as a template. Add the CSS to your Appearance > Customize > Additional CSS or your child theme’s style.css file.
CSS example to specify the background image for the responsive card in a slide.
/**
* Swiper Slider Plugin Custom Styles
*/
#my-swiper-slide-1 {
background-image: url(mybgimg-1.png);
}
#my-swiper-slide-2 {
background-image: url(mybgimg-2.png);
}
#my-swiper-slide-3 {
background-image: url(mybgimg-3.png);
}
Credits
Powered by Swiper.js.
