Title: Fade Slider
Author: Anandaraj Balu
Published: <strong>2016년 4월 5일</strong>
Last modified: 2026년 2월 28일

---

플러그인 검색

![](https://ps.w.org/fade-slider/assets/banner-772x250.png?rev=3471575)

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

# Fade Slider

 작성자: [Anandaraj Balu](https://profiles.wordpress.org/anand000/)

[다운로드](https://downloads.wordpress.org/plugin/fade-slider.zip)

 * [세부사항](https://ko.wordpress.org/plugins/fade-slider/#description)
 * [평가](https://ko.wordpress.org/plugins/fade-slider/#reviews)
 *  [설치](https://ko.wordpress.org/plugins/fade-slider/#installation)
 * [개발](https://ko.wordpress.org/plugins/fade-slider/#developers)

 [지원](https://wordpress.org/support/plugin/fade-slider/)

## 설명

Fade Slider is a lightweight, modern carousel/slider plugin built on Bootstrap 5.3.
It provides smooth fade and slide animations with full responsiveness and works 
seamlessly with any WordPress theme.

#### Key Features

 * Bootstrap 5.3 carousel component with native animations
 * Fade and slide animation modes
 * Fully responsive design (mobile, tablet, desktop)
 * Adaptive height scaling for different screen sizes
 * Touch and keyboard navigation support
 * Customizable interval, pause behavior, and autoplay
 * Slide titles, descriptions, and clickable URLs
 * Indicator dots and navigation arrows
 * Responsive caption display with mobile optimization
 * Works with any theme (includes Bootstrap or uses CDN)
 * Automatic Bootstrap duplicate detection (prevents conflicts)
 * **Drag and drop slide reordering with visual feedback**
 * **Auto-save slide order when reordered**

#### Custom Options

    ```
    1. Install and activate the plugin
    2. Create a new slider in the admin panel (Fade Slider menu)
    3. Configure animation type (Fade or Slide)
    4. Set carousel interval (delay between slides in milliseconds)
    5. Add slides with images, titles, descriptions, and URLs
    6. Set slider height/width (auto-scales to 70% on tablet, 60% on mobile, 50% on small phones)
    7. Choose to show/hide captions on small devices
    8. **Drag and drop slides to reorder** - Simply click and drag a slide thumbnail to change its display order. Visual feedback shows where the slide will be placed
    9. Add shortcode to page/post: [display_fade_slider id=SLIDER_ID]
    10. Or use template: <?php fade_slider_template('[display_fade_slider id=SLIDER_ID]'); ?>
    ```

#### Shortcode Usage

    ```
    [display_fade_slider id=1]
    ```

#### Configuration Options

 * Animation: Choose between Fade or Slide effects
 * Interval: Set auto-play delay (milliseconds) or turn off with ‘off’
 * Hover Pause: Pause slider on mouse hover
 * Show Indicators: Display bottom dot navigation
 * Show Arrows: Display prev/next buttons
 * Description Responsive: Hide captions on mobile devices (only shows on desktop/
   tablet)
 * Slider Height and Width: Auto-responsive scaling

#### Frequently Asked Questions

 1.  Which Bootstrap version is required?
 2.  Bootstrap 5.3.3 is automatically loaded via CDN. If your theme already includes
     Bootstrap 5.3+, the plugin will automatically detect and avoid duplication.
 3.  Do I need to install Bootstrap separately?
 4.  No. Bootstrap 5.3 is loaded automatically via CDN. The plugin includes intelligent
     duplicate detection to prevent conflicts with theme-provided Bootstrap.
 5.  Does it work on mobile devices?
 6.  Yes. The plugin is fully responsive with adaptive height scaling:
 7.   * Desktop (≥1200px): Full configured dimensions
      * Tablet (768px-1199px): 70% of viewport height
      * Mobile (≤767px): 50-60% of viewport height
      * Small phones (≤375px): 40% of viewport height
 8.  Can I customize animations?
 9.  Yes. Two animation modes are available: Fade (opacity transition) and Slide (horizontal
     transition).
 10. Is there keyboard/touch support?
 11. Yes. The carousel supports touch gestures, arrow keys for navigation, and full
     accessibility features.
 12. How do I hide captions on mobile?
 13. In slider settings, select “Hide” for “Description Responsive” option. Captions
     will only show on tablets and desktops (≥768px).
 14. How do I reorder slides?
 15. You can easily drag and drop slides to change their display order. Click and hold
     on a slide thumbnail, then drag it to the desired position. The slide order is
     automatically saved when you release it. Visual highlighting shows where the slide
     will be positioned.
 16. Can I edit slide images after adding them?
 17. Yes. Click the edit icon (pencil) on any slide thumbnail to change the image. 
     Click the trash icon to remove a slide entirely.

## 스크린샷

[⌊screenshot-1.png⌉⌊screenshot-1.png⌉[

screenshot-1.png

[⌊screenshot-2.png⌉⌊screenshot-2.png⌉[

screenshot-2.png

[[

[[

## 설치

 1. Upload the plugin files to `/wp-content/plugins/fade-slider/` directory
 2. Activate the plugin through the ‘Plugins’ menu in WordPress
 3. Go to “Fade Slider” in the admin menu
 4. Create a new slider and configure your options
 5. Add slides with images and optional titles/descriptions
 6. Use the shortcode [display_fade_slider id=SLIDER_ID] in pages or posts

## 후기

![](https://secure.gravatar.com/avatar/d78725fa2fb03826816d3f2b4a143fbd119134df57f6a6e9a677fbb171fedac1?
s=60&d=retro&r=g)

### 󠀁[Simple and great! 🙂](https://wordpress.org/support/topic/simple-and-great-101/)󠁿

 [thh022](https://profiles.wordpress.org/thh022/) 2018년 1월 24일 답글 1개

The plugin does what is says and is easy to use with shortcode for pages/posts. 
Thanks! 🙂

![](https://secure.gravatar.com/avatar/185f0df34092758c1af05cea0f448ad97d650729020c264bcb168f7d42aec241?
s=60&d=retro&r=g)

### 󠀁[Works great](https://wordpress.org/support/topic/works-great-2955/)󠁿

 [Sumathisubha](https://profiles.wordpress.org/sumathisubha/) 2016년 9월 3일

Works great

![](https://secure.gravatar.com/avatar/df05ce5dae263cbc159ddb8808a7a553ea3a419982b71e6e6b56a553e000d045?
s=60&d=retro&r=g)

### 󠀁[Its working..!](https://wordpress.org/support/topic/its-working-34/)󠁿

 [Naveenkumar C](https://profiles.wordpress.org/cnaveenkumar/) 2016년 9월 3일

Its working..!

 [ 모든 5 평가 읽기 ](https://wordpress.org/support/plugin/fade-slider/reviews/)

## 기여자 & 개발자

“Fade Slider”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.

기여자

 *   [ Anandaraj Balu ](https://profiles.wordpress.org/anand000/)

[자국어로 “Fade Slider”(을)를 번역하세요.](https://translate.wordpress.org/projects/wp-plugins/fade-slider)

### 개발에 관심이 있으십니까?

[코드 탐색하기](https://plugins.trac.wordpress.org/browser/fade-slider/)는, [SVN 저장소](https://plugins.svn.wordpress.org/fade-slider/)
를 확인하시거나, [개발 기록](https://plugins.trac.wordpress.org/log/fade-slider/)
을 [RSS](https://plugins.trac.wordpress.org/log/fade-slider/?limit=100&mode=stop_on_copy&format=rss)
로 구독하세요.

## 변경이력

#### 1.0

 * New: Fade Slider plugin

#### 1.1

 * Update Admin options and admin UI

#### 2.0

 * Update bootstrap version v3x to v3.3.7x
 * Add multisite options
 * Add intervel and nav controls
 * Support Non Bootsrrap themes
 * Multi slide options added.
 * Slide title, description and url fields added
 * Light weight plugin

#### 2.1

 * Admin UI changed
 * Update metabox issues
 * Silder Width and Height option added
 * Slider description have option to show responsive

#### 2.3

 * Add edit slide option.
 * Add re-order slides option.
 * Add regenerate slide sizes.

#### 2.5

 * Update bootstrap 4.3.1.
 * Fixed slide dimention issue.

#### 2.6

 * Major: Update to Bootstrap 5.3.3 with native carousel API
 * Fix: Fade and slide animations now working properly
 * New: Smooth CSS transitions with proper transform/opacity handling
 * New: Responsive height scaling (70% tablet, 60% mobile, 50% small phone)
 * New: Auto-responsive caption display with font scaling
 * New: Enhanced mobile controls (larger touch targets)
 * New: Indicator dots responsive sizing
 * New: Bootstrap duplicate detection to prevent conflicts
 * New: Drag and drop slide reordering with visual feedback
 * New: Auto-save slide order when reordered
 * Improved: Better touch and keyboard navigation support
 * Improved: Mobile-first responsive design
 * Improved: Caption visibility control on small devices

## 기초

 *  버전 **2.6**
 *  최근 업데이트: **6개월 전**
 *  활성화된 설치 **100+**
 *  워드프레스 버전 ** 5.0 또는 그 이상 **
 *  다음까지 시험됨: **6.9.7**
 *  언어
 * [English (US)](https://wordpress.org/plugins/fade-slider/)
 * 태그:
 * [bootstrap slider](https://ko.wordpress.org/plugins/tags/bootstrap-slider/)[carousel](https://ko.wordpress.org/plugins/tags/carousel/)
   [Fade Slider](https://ko.wordpress.org/plugins/tags/fade-slider/)[slider](https://ko.wordpress.org/plugins/tags/slider/)
 *  [고급 보기](https://ko.wordpress.org/plugins/fade-slider/advanced/)

## 평점

 별 5점 만점에 5점.

 *  [  3/5-별점 후기     ](https://wordpress.org/support/plugin/fade-slider/reviews/?filter=5)
 *  [  0/4-별점 후기     ](https://wordpress.org/support/plugin/fade-slider/reviews/?filter=4)
 *  [  0/3-별점 후기     ](https://wordpress.org/support/plugin/fade-slider/reviews/?filter=3)
 *  [  0/2-별점 후기     ](https://wordpress.org/support/plugin/fade-slider/reviews/?filter=2)
 *  [  0/1-별점 후기     ](https://wordpress.org/support/plugin/fade-slider/reviews/?filter=1)

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

[모든  리뷰 보기](https://wordpress.org/support/plugin/fade-slider/reviews/)

## 기여자

 *   [ Anandaraj Balu ](https://profiles.wordpress.org/anand000/)

## 지원

할 말 있으신가요? 도움이 필요하신가요?

 [지원 포럼 보기](https://wordpress.org/support/plugin/fade-slider/)