slick slider 사용법 정리

slick - the last carousel you'll ever need

해당 사이트에 들어간다
상단의 get it now 클릭
하단에서 Download 받습니다
다운로드 받은 파일의 압축을 풀고,

slick.css 파일과 slick.js 파일 두개를 꺼내 각각의 폴더에 위치시킵니다.

반드시 두가지 파일을 다 연결시켜줘야 하니 주의해주세요!

css 파일을 head에서 연결합니다.

<link rel="stylesheet" href="slick.css">

js 파일을 body의 가장 하단에 연결합니다.
```
<script src="slick.js"></script>
```
slick.js는 반드시 제이쿼리를 필요로 합니다. 그렇기 때문에 제이쿼리 라이브러리를 연결해 줘야 합니다. 이 때, 제이쿼리 연결이 slick의 상단으로 가야 합니다.
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="slick.js"></script>
```

그렇게 해서 만들어진 문서의 전체 형태

<!DOCTYPE html>
<html>
    <head>
        <title>slickSlide</title>
        <link rel="stylesheet" href="slick.css"/>
    </head>
    <body>
 

			<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
			<script src="slick.js"></script> 
      
		</body>
</html>

주의사항

script 링크들과 파일들, 그리고 코드들은 모두 body의 제일 하단에 놔 두세요.

하단에 있어야지만 모든 웹문서를 다 읽고 나서 해당 스크립트를 실행시킬 수 있습니다.
경로!!! 지금은 html파일과 js/css 파일들이 다 나란히 놓여져 있기 때문에 그냥 경로에서 해당 파일 이름만 호출해도 됐지만 나중에 본격적인 프로젝트를 할 경우 css 파일과 js파일은 다른 폴더로 분류를 해야합니다. 이 때 상대경로 작성에 유의해주세요.

실행법

슬라이드를 돌릴 것들을 반드시 하나의 부모로 싸줍니다.

		  <div class="con1">
            <div class="box box1">red</div>
            <div class="box box2">orangered</div>
            <div class="box box3">orange</div>
            <div class="box box4">gold</div>
            <div class="box box5">yellow</div>
            <div class="box box6">yellowgreen</div>
       </div><!--con1-->

슬라이드로 돌릴 .box들을 하나의 부모 = .con1로 감싸줍니다.

상단에서 css로 .box들 스타일링을 합니다.

			.box{
                height: 400px;
                font-weight: 900;
                font-size: 100px;
                font-family: arial;
                text-align: center;
                line-height: 400px;
            }
            .box1{background: red;}
            .box2{background: orangered;}
            .box3{background: orange;}
            .box4{background: gold;}
            .box5{background: yellow;}
            .box6{background: yellowgreen;}

이 때, nth-child() 사용은 하지 않는 것이 좋습니다.

slick.js 를 실행시키면 슬라이드가 될 div들을 감싸는 부모가 여러개 생겨나기 때문에 순서가 뒤틀려버려서 nth-child()로 선택자를 잡을 수 없게 됨!

해결방법 : div마다 각기 다른 클래스를 하나씩 더 줘서 불러오는 형태로 사용합니다.

slick slider를 실행시킵니다.
```
$('.con1').slick();
```
슬라이더의 컨테이너에 해당하는 부분에게 jQuery 명령어로 slick() 함수를 실행시킵니다