Title: BoldSlider
Author: Mahabub Alam
Published: <strong>2026 年 5 月 14 日</strong>
Last modified: 2026 年 5 月 14 日

---

搜尋外掛

![](https://s.w.org/plugins/geopattern-icon/boldslider.svg)

# BoldSlider

 由 [Mahabub Alam](https://profiles.wordpress.org/maha25/) 開發

[下載](https://downloads.wordpress.org/plugin/boldslider.0.1.0.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/boldslider/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/boldslider/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/boldslider/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/boldslider/#developers)

 [技術支援](https://wordpress.org/support/plugin/boldslider/)

## 外掛說明

BoldSlider is a lightweight, fully-responsive slider builder for WordPress with 
a real visual editor — drag layers on a canvas, set per-device overrides, and embed
via shortcode or Gutenberg block.

#### Free version highlights

 * **Visual builder** — drag, resize, rotate layers on a real canvas. Eight resize
   handles. Keyboard nudge + delete.
 * **Per-device responsive** — override layer position, size, font size, color, 
   and visibility separately for Desktop / Tablet / Mobile.
 * **Layer types (7 free):** Heading, Paragraph, Image, Button, Shape, YouTube embed,
   Vimeo embed.
 * **Slider effects:** Slide, Fade, Cube, Coverflow, Flip, Cards.
 * **Backgrounds:** image (with cover/contain/percentage/auto fit, repeat, 9-grid
   + custom position), color, uploaded MP4 video.
 * **Background animations:** Ken Burns, Zoom In, Zoom Out, Pan Left, Pan Right.
 * **Navigation arrows** with placement (inside/outside) + position (top/middle/
   bottom) + size + offset + colors + hover styles.
 * **Pagination** (bullets / fraction / progress bar) with placement, position, 
   bullet size/gap, clickable, active + inactive colors.
 * **Thumbnail strip** (Swiper Thumbs).
 * **Autoplay** with delay + pause-on-hover.
 * **Layer animations** — 8 CSS-based entrance presets (fade, fade-up/down/left/
   right, zoom-in/out).
 * **Button hover styles** + 12 built-in arrow icons.
 * **Starter templates:** Multiple ready-to-use templates (Hero, Business, Portfolio,
   Testimonials, Promo / Sale, Product Launch, Team, Event, Startup, Minimal, Restaurant,
   Charity, Welcome).
 * **Embed** via `[boldslider id="your-slider-slug"]` shortcode or Gutenberg block.
 * **Import / Export** sliders as JSON.
 * **Duplicate** sliders + slides in one click.
 * **Slider library page** with thumbnail previews + search.
 * **Performance:** lazy-load images, no jQuery, no external CDN, deferred JS.
 * **SEO friendly:** semantic `<h1>`–`<h6>` headings, `alt` and `title` attributes(
   Media Library or custom).
 * **Accessibility:** keyboard navigation, proper ARIA labels.

#### External services

BoldSlider does not call out to any external services or CDNs. All assets are bundled
locally inside the plugin.

### Development

#### Source code

The compiled/minified JavaScript and CSS files in `assets/dist/` are built from 
the uncompressed source code included in this plugin:

 * **Editor UI (React):** `editor/src/` — JSX components, store, hooks, views, and
   SCSS styles.
 * **Frontend runtime:** `editor/src/frontend.js` — Swiper initialization and layer
   animations.
 * **Block editor script:** `editor/src/block.js` — Gutenberg block registration.
 * **Stylesheets:** `editor/src/editor.scss` and `editor/src/frontend.scss`.

#### Build instructions

Prerequisites: Node.js 18+ and npm 9+.

 1. Navigate to the plugin directory: `cd boldslider`
 2. Install dependencies: `npm install`
 3. Build production assets: `npm run build`
 4. For development with live rebuild: `npm run start`

The build pipeline uses `@wordpress/scripts` (webpack-based).

#### Third-party libraries

 * [Swiper](https://swiperjs.com/) v11 — MIT License — touch-enabled slider engine.

## 安裝方式

 1. Upload the `boldslider` folder to `/wp-content/plugins/`, or install via the Plugins
    screen.
 2. Activate the plugin.
 3. Go to **BoldSlider** in the admin menu.
 4. Click **+ New Slider**, pick a template, name it, then click **Create & Edit**.
 5. Drag layers, set styling, save.
 6. Embed in any post or page using the shortcode shown in the slider list, or the 
    BoldSlider Gutenberg block.

## 常見問題集

### Does the plugin require jQuery?

No. BoldSlider is built with vanilla JavaScript and Swiper. jQuery is not enqueued
or required.

### Does the plugin call any external services?

No. BoldSlider does not call any third-party CDNs or APIs. All assets (Swiper, fonts,
etc.) are served from your own site.

### How do I embed a slider?

Two options:

 * Shortcode: `[boldslider id="your-slider-slug"]` — the slug is shown in the slider’s
   edit screen and on each card in the slider list.
 * Gutenberg: add the **BoldSlider** block and pick your slider from the dropdown.

### Can I import a slider from another site?

Yes. On the slider list page, hover any card and click **Export** to download a 
JSON file. On the destination site, click **Import** and pick the JSON file.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈BoldSlider〉的開發相關工作。

參與者

 *   [ Mahabub Alam ](https://profiles.wordpress.org/maha25/)

[將〈BoldSlider〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/boldslider)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/boldslider/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/boldslider/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/boldslider/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/boldslider/)。

## 變更記錄

#### 0.1.0

 * Initial release.

## 中繼資料

 *  版本 **0.1.0**
 *  最後更新 **2 週前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.0 或更新版本 **
 *  已測試相容的 WordPress 版本 **6.9.4**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/boldslider/)
 * 標籤:
 * [carousel](https://tw.wordpress.org/plugins/tags/carousel/)[hero](https://tw.wordpress.org/plugins/tags/hero/)
   [slider](https://tw.wordpress.org/plugins/tags/slider/)[slideshow](https://tw.wordpress.org/plugins/tags/slideshow/)
   [swiper](https://tw.wordpress.org/plugins/tags/swiper/)
 *  [進階檢視](https://tw.wordpress.org/plugins/boldslider/advanced/)

## 評分

這個項目尚無任何評論記錄。

[Your review](https://wordpress.org/support/plugin/boldslider/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/boldslider/reviews/)

## 參與者

 *   [ Mahabub Alam ](https://profiles.wordpress.org/maha25/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/boldslider/)