[HTML/CSS] Slick-slide 사용법

hi·2022년 4월 29일

CSS html

왕초보를 위한 사용법 (그래 바로 나)

일단 제이쿼리를 받고 시작하기

사용법은 크게 두가지인데
1. 파일을 다운 받아 사용
2. 공유 링크 가져와서 사용 - 이건 바로 3번으로 이동 ㄱㄱ

파일을 다운 받아 사용하는 것부터 시작해보자면

1. 킹갓제너럴어쩌고 사이트로 입장 👉 get it now 클릭

http://kenwheeler.github.io/slick/

2. Download Now

알집이 다운로드 된다.. 압축을 풀어라 !!

왕초보는 곧바로 slick 폴더 입장

우리에게 필요한 것
프로젝트 폴더에 고이 모셔간다

3. html에 연결

<script src="./js/jquery.js"></script>
<script src="./slick/slick.min.js"></script>

<link rel="stylesheet" href="./css/slick/slick.css" />
<link rel="stylesheet" href="./css/slick/slick-theme.css" />

<head> 태그에 작성 !
복붙해서 경로만 본인 폴더 위치에 맞게 변경하자

파일을 받지 않은 경우에는 아래 링크로 연결해주면 된다
제이쿼리도 연결할 수 있 ....

<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" />

4. 다시 홈페이지로 가서 쓸 거 고르자

http://kenwheeler.github.io/slick/

다양한 스타일들이 있는데 한 놈 고르고
코드를 긁어온다

<head> 속에 <script> 태그를 열어 붙여넣는다

<script>
$( document ).ready( function() {
	
    ~ 여기에 붙여넣기 ~
	
  } );
</script>

좋아 !! 거의 다 했다구

5. `body` 에 원하는 구조로 만들어준다

div로 만들기 !

	<div class="center">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>

class명은 가져온 코드 속
👇 이곳에 들어가는 이름과 동일하게 맞춰주자

흰 배경에서는 눈에 띄지 않기 때문에 스타일을 적당히 주고 확인해보면

이렇게 잘 나옴 !

우와 ~~ ,, ,

전체 코드는

<html>
<head>

<link rel="stylesheet" href="./css/slick/slick.css" />
<link rel="stylesheet" href="./css/slick/slick-theme.css" />

<script src="./js/jquery.js"></script>
<script src="./slick/slick.min.js"></script>

<script>
$( document ).ready( function() {
	$('.center').slick({
		  centerMode: true,
		  centerPadding: '60px',
		  slidesToShow: 3,
		  responsive: [
		    {
		      breakpoint: 768,
		      settings: {
		        arrows: false,
		        centerMode: true,
		        centerPadding: '40px',
		        slidesToShow: 3
		      }
		    },
		    {
		      breakpoint: 480,
		      settings: {
		        arrows: false,
		        centerMode: true,
		        centerPadding: '40px',
		        slidesToShow: 1
		      }
		    }
		  ]
		});
  } );
</script>
</head>

<body>
	<div class="center">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
</body>
</html>