Slick Slider는 자주 사용되는 jQuery 기반의 슬라이더 플러그인입니다. Slick Slider를 새로고침(재설정)하는 예제를 보여 드리겠습니다. 먼저 slick 슬라이더를 사용하려면 필요한 라이브러리를 추가해야 합니다.
1. 라이브러리 추가:
HTML 파일의 `<head>` 섹션에 아래 코드를 추가하여 jQuery 및 Slick 라이브러리를 가져옵니다:
```html
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
```
2. HTML 마크업 작성:
Slick 슬라이더를 적용할 HTML 요소를 추가하고 "새로고침" 버튼을 추가합니다.
```html
<div class="slider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
</div>
<button id="refreshSlider">새로고침</button>
```
3. Slick 슬라이더 설정 및 새로고침 함수 작성:
Slick 슬라이더를 초기화하고, 새로고침 버튼을 클릭할 때 슬라이더를 새로고침하는 기능을 추가합니다.
```javascript
$(document).ready(function () {
const slider = $(".slider");
// Slick 슬라이더 초기화
slider.slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
// 새로고침 버튼 클릭 이벤트 처리
$("#refreshSlider").on("click", function () {
slider.slick("unslick"); // 현재 슬라이더 해제
slider.slick({ // 슬라이더 다시 초기화
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});
});
```
전체 예제 코드는 다음과 같습니다:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slick Slider Refresh Example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
<body>
<div class="slider">
<div>Slide
'개발' 카테고리의 다른 글
| 코드이그나이터(CodeIgniter)에서 Ajax 요청 확인하는 방법 (0) | 2023.05.05 |
|---|---|
| php 엑셀 행높이 설정 방법 (0) | 2023.05.05 |
| JavaScript로 URL 파라미터 가져오는 방법 및 예제 (0) | 2023.05.05 |
| Spring Boot에서 응답 헤더 서버 이름 설정하는 방법 (0) | 2023.05.05 |
| jQuery Datepicker 날짜 선택 이벤트 예제 (0) | 2023.05.05 |
댓글