Slick Arrow 모양 변경하기 본문
기본모양에서 색만 변경하려면 아래 코드와 같이 작성하면 된다
.slick-prev:before {
color: black;
}
.slick-next:before {
color: #FFFF00;
}
원하는 모양이 있을 경우 스크립트 부분을 아래 코드와 같이 작성하면 된다
$('.multiple-items').slick({
infinite: true,
slidesToShow: 7,
slidesToScroll: 7,
// 아래의 코드에서 <svg>태그 대신 넣고싶은 img나 url을 입력
// 필자는 fontawesome의 icon svg를 넣었다
// 참고 주소에 보면 다른 방법들이 더 있으므로 원하는 방법으로 적용하면 된다
prevArrow:"<button type='button' class='slick-prev pull-left'>
<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"/></svg>
</button>",
nextArrow:"<button type='button' class='slick-next pull-right'>
<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"/></svg>
</button>"
});
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
$(document).ready(function() {
$('.multiple-items1').slick({
infinite: true,
slidesToShow: 7,
slidesToScroll: 7,
prevArrow:"<button type='button' class='slick-prev pull-left'><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256S114.6 512 256 512s256-114.6 256-256zM116.7 244.7l112-112c4.6-4.6 11.5-5.9 17.4-3.5s9.9 8.3 9.9 14.8l0 64 96 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32l-96 0 0 64c0 6.5-3.9 12.3-9.9 14.8s-12.9 1.1-17.4-3.5l-112-112c-6.2-6.2-6.2-16.4 0-22.6z\"/></svg></button>",
nextArrow:"<button type='button' class='slick-next pull-right'><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M0 256C0 397.4 114.6 512 256 512s256-114.6 256-256S397.4 0 256 0S0 114.6 0 256zm395.3 11.3l-112 112c-4.6 4.6-11.5 5.9-17.4 3.5s-9.9-8.3-9.9-14.8l0-64-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-64c0-6.5 3.9-12.3 9.9-14.8s12.9-1.1 17.4 3.5l112 112c6.2 6.2 6.2 16.4 0 22.6z\"/></svg></button>"
});
$('.multiple-items2').slick({
infinite: true,
slidesToShow: 7,
slidesToScroll: 7,
prevArrow:"<button type='button' class='slick-prev pull-left'><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"/></svg></button>",
nextArrow:"<button type='button' class='slick-next pull-right'><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"/></svg></i></button>"
});
});
</script>
</head>
<body>
<section class="a" >
<div class="slide-title">Test1</div>
<br />
<div class="multiple-items1">
<div>1_1</div>
<div>1_2</div>
<div>1_3</div>
<div>1_4</div>
<div>1_5</div>
<div>1_6</div>
<div>1_7</div>
<div>1_8</div>
<div>1_9</div>
<div>1_10</div>
</div>
</section>
<section class="a" >
<div class="slide-title">Test2</div>
<br />
<div class="multiple-items2">
<div>2_1</div>
<div>2_2</div>
<div>2_3</div>
<div>2_4</div>
<div>2_5</div>
<div>2_6</div>
<div>2_7</div>
<div>2_8</div>
<div>2_9</div>
<div>2_10</div>
</div>
</section>
</body>
</html>
실행결과
참고
https://stackoverflow.com/questions/29876185/change-the-arrow-buttons-in-slick-slider
'ETC' 카테고리의 다른 글
| 스프링 form에러 : web.xml 또는 이 애플리케이션과 함께 배치된 JAR 파일 내에서 찾을 수 없습니다. (0) | 2022.11.18 |
|---|---|
| [jstl 오류 기록] 절대 URI인 [http://java.sun.com/jsp/jstl/core]을(를), web.xml 또는 이 애플리케이션과 함께 배치된 JAR 파일 내에서 찾을 수 없습니다. (0) | 2022.10.24 |
| [lombok 설치 오류] cmd에서 installer가 안 뜰 경우 (0) | 2022.10.09 |
| [이클립스 오류 기록] - 404 가용하지 않습니다 (0) | 2022.10.06 |
| [Tomcat 오류 기록] Tomcat v9.0 404 Error (0) | 2022.09.23 |
'ETC' 관련글
더보기
Comments