# 슬라이드 이미지

## 슬러✅ 1. Smart Slider 3 기준: 슬라이드 이미지 만들기

### 📌 1단계. 설치 및 활성화

1. 관리자 → **플러그인 > 새로 추가**
2. 검색: `Smart Slider 3`
3. \[설치] 후 \[활성화]

<figure><img src="/files/aXX1P8TlCNKMYCnvSYME" alt=""><figcaption></figcaption></figure>

***

### 📌 2단계. 새 슬라이더 만들기

1. 좌측 메뉴 → **Smart Slider** 클릭
2. \[New Project] 클릭 → Create a New Project → 이름 입력 (`Main Banner` 등)
3. 슬라이드 수 설정 → \[Create]

<figure><img src="/files/nH7pmCWMQ4mTYR2p3NNO" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/Mvyl1qLtjVjNVexWAT4H" alt="" width="375"><figcaption></figcaption></figure>

***

### 📌 3단계. 슬라이드 추가 및 구성

* 각 슬라이드에 **이미지**, **텍스트**, **버튼**, **링크** 추가 가능
* 순서 변경 및 애니메이션 효과 설정도 가능

<figure><img src="/files/S85aW6Szu6DmbR7VDdOv" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

* 이미지 업로드 후 마우스 커서 올리면 EDIT 개별 슬라이더 커스텀 가능
  {% endhint %}

<figure><img src="/files/xU89tSK8yrU8J8YdeJX4" alt=""><figcaption></figcaption></figure>

> * 버튼 / 글씨 문단 이동을 드래그로 희망하실 경우 버튼/텍스트 클릭 -> STYLE -> POSITION -> Absolute 변경&#x20;

<figure><img src="/files/X2NMICJjO9RV1O3X0ar3" alt="" width="307"><figcaption></figcaption></figure>

#### ✅ 대표 구성 예:

```
[슬라이드1] 이미지 + 텍스트 "신규 플랜 오픈!" + 버튼 "확인하기"
[슬라이드2] 이미지 + 텍스트 "서비스 연장 20% 할인!" + 버튼 "지금 보기"
```

<figure><img src="/files/DPPfxAY5pYqQJUAD95hu" alt=""><figcaption></figcaption></figure>

***

### 📌 4단계. 슬라이더를 페이지에 삽입

1. 슬라이더 저장 후, 프로젝트메인에서 **숏코드(Shortcode) 복사**

   ```
   [smartslider3 slider="2"]
   ```
2. 페이지 편집 → 본문에 붙여넣기
3. 저장/발행

<figure><img src="/files/MCQt4gApfdDSEMudLLaC" alt=""><figcaption><p>Shortcode 복사</p></figcaption></figure>

<figure><img src="/files/uDgKN3XPAhReq1bnlbAl" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

* 1열 생성 -> 단축코드 블록 선택 -> 복사한 숏코드 입력 -> 저장
  {% endhint %}

***

### ✅ 결과 예시

> 메인 페이지에 슬라이드 배너가 자동으로 넘겨지는 구조로 표시됨\
> 텍스트와 버튼, 링크도 각 이미지마다 설정 가능\
> 반응형 자동 지원

<figure><img src="/files/oLQyckD2MCv3aEdjC9Nn" alt=""><figcaption></figcaption></figure>

***

### 📌 마무리 팁

| 기능             | 설명                 |
| -------------- | ------------------ |
| 자동 넘김 시간 설정    | 3초 / 5초 / 수동 등 가능  |
| 화살표, 점(dot) 표시 | 디자인에서 켜고 끌 수 있음    |
| 링크 연결          | 각 슬라이드마다 URL 지정 가능 |
| 모바일 대응         | 반응형 자동 적용됨         |

## 2. 스마트 슬라이드 세부 기능

<details>

<summary>슬라이드 자동  전환</summary>

* 스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Autoplay -> 활성화&#x20;

<figure><img src="/files/8uru0tWs1brseM2OHUmF" alt=""><figcaption><p>전환 시간 및 세부 옵션 설정</p></figcaption></figure>

</details>

<details>

<summary> 슬라이드 크기 조정</summary>

* 스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Size -> Slider Size  조정&#x20;

<figure><img src="/files/hDIy57tayOdVky3aIAbA" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary> 슬라이드 썸네일 추가</summary>

* 스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Controls -> Thumbnails 활성화&#x20;

<figure><img src="/files/kHBiD2P4fRcmjWI8DFME" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary> 슬라이드 화면 전환 버튼 추가</summary>

* 스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Controls -> Arrow 활성화&#x20;

<figure><img src="/files/qS9urOtj619tCjNEa21G" alt=""><figcaption></figcaption></figure>

</details>

### ※ 샘플 슬라이드 제작 방법

예시) 슬라이드 속 하단에 썸네일을 추가한 슬라이드 제작 예시 입니다.

<figure><img src="/files/hmq318vYcyNOgE5G45VT" alt=""><figcaption></figcaption></figure>

1. 스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Controls -> Thumbnails&#x20;

* Position - Bottome Center&#x20;
* Align Thumbnails - Center

※ Bar -> STYLE 버튼 클릭 \
\- Background Color FFFFFF00  (썸네일 공간 배경 투명 지정)\
\- Opacity - 100%\
\- Padding - 3px&#x20;

※ Thumbnail -> STYLE 버튼 클릭\
\- Background Color - 00000000\
\- Opacity - 40%\
\- Padding - 10px <br>

2. 저장 후 확인


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://s-organization-887.gitbook.io/hostyle-web/wordpress-2/undefined-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.