고정 헤더 영역
상세 컨텐츠
본문
반응형
제이쿼리(JQuery) 라이브러리 - slick 슬라이더 활용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slick slider</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
</head>
<style>
.slider {
width: 1280px;
margin: 0px auto;
}
.slick-prev:before,
.slick-next:before {
color: #8bc7e2;
}
</style>
<body>
<div class="slider">
<div style="width: 200px; height: 200px; background-color: red;"></div>
<div style="width: 200px; height: 200px; background-color: blue;"></div>
<div style="width: 200px; height: 200px; background-color: yellow;"></div>
<div style="width: 200px; height: 200px; background-color: green;"></div>
<div style="width: 200px; height: 200px; background-color: orange;"></div>
<div style="width: 200px; height: 200px; background-color: purple;"></div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('.slider').slick({
autoplay: true,
autoplaySpeed: 500,
fade: true
});
});
</script>※위에 코드 형식에 맞게 삽입만 해도 슬라이더 나옴
제이쿼리(JQuery) 라이브러리 - slick 슬라이더 사용가능 옵션
<script>
$(function () {
$('slider').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite: true, //무한 반복 옵션
slidesToShow: 4, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll: 1, //스크롤 한번에 움직일 컨텐츠 개수
speed: 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows: true, // 옆으로 이동하는 화살표 표시 여부
dots: true, // 스크롤바 아래 점으로 페이지네이션 여부
autoplay: true, // 자동 스크롤 사용 여부
autoplaySpeed: 10000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover: true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical: false, // 세로 방향 슬라이드 옵션
prevArrow: "<button type='button' class='slick-prev'>Previous</button>", // 이전 화살표 모양 설정
nextArrow: "<button type='button' class='slick-next'>Next</button>", // 다음 화살표 모양 설정
dotsClass: "slick-dots", //아래 나오는 페이지네이션(점) css class 지정
draggable: true, //드래그 가능 여부
responsive: [ // 반응형 웹 구현 옵션
{
breakpoint: 960, //화면 사이즈 960px
settings: {
//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
slidesToShow: 3
}
},
{
breakpoint: 768, //화면 사이즈 768px
settings: {
//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
slidesToShow: 2
}
}
]
});
})
</script>옵션만 잘 사용해도 시간 안쓰고 쉽게 만들수 있음
외우지 마셈 인터넷에 치면 다 나옴
화면상에 아래와 같이 div 구역이 나오고 좌우로 클릭버튼이 있어 div를 하나씩 넘길 수 있음
이거 못만들면 문제 있는거임
끝!
반응형
'웹 > Javascript' 카테고리의 다른 글
| 자바스크립트(Javascript)_JSON의 이해_내장객체 stringify와parse 사용법 (1) | 2023.10.22 |
|---|---|
| 자바스크립트(Javascript)_배열의 이해_JavaScript Arrays (1) | 2023.10.21 |
| 자바스크립트(Javascript)_split()함수_여러개 문자열 조작을 위한 방법 마스터하기 (2) | 2023.10.20 |
| 자바스크립트(Javascript) - 토글버튼(toggle button) 클릭시 사이드 메뉴 왼쪽에서 우측으로 나오게 하기! (0) | 2023.04.21 |
| 자바스크립트(Javascript) - 이벤트함수_event.keyCode (0) | 2023.04.18 |
댓글 영역