안녕하세요..
찐망고입니다.
매일매일 포스팅하는 게 참 쉬운 게 아니네요..
자료는 많은데 취합해서 포스팅한다는 게.. 말이죠
오늘은 슬라이드 관련 포스팅을 해보려고 합니다.
마크업 퍼블리싱 블로그인데..
요소는 시멘틱 요소만 해놓고..
플러그인이라니...
요즘 제가 자주 쓰는 플러그인이 두 가지인데요
하나는 slick이 있고
또 하나는 swiper입니다.
머 나름 다른 것들도 많이 쓰긴 했지만요..
bx라거나 owl 이런 옛날 옛적 플러그인은 안녕..~
마크업을 할 때 사용하는 플러그인들은 더 강력한 애니메이션을 만들기 위한 도움을 줍니다
그들이 제공하는 API만 잘 사용하면 더 디테일한 슬라이드 작업이 가능하죠.
솔직히 제가 블로그를 만든 가장 큰 이유 중에 하나가
그런 것들을 제공하기 위해서도 한몫!!!
대신 마크업이나 API를 사용함에 있어 이렇게도 가능하다는 예시를 보여주는 것뿐이니
참고만 해주세요..😂
본론으로 들어가서 두 가지 플러그인 중 저는 slick플러그인을 사용해 볼 거고요..
swiper도 할 겁니다.
둘 다 할 거임..
기본 메인 슬라이드부터 볼까요?
일단 다운을 받아야 해요
본인이 작업하고 있는 폴더에 경로에 맞춰 잘 넣어줍니다.
그러고 보니 경로 관련 포스팅도 해야겠어요 나중에 ㅎㅎ
HTML에 마크업 할 땐
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick();
});
</script>
</body>
</html>위처럼 코드를 넣으면 기본 slick슬라이드가 완성됩니다.
slick의 기본값을 설정하면 기본적으로 들어가는 기능들이 있는데요.
- 양옆에 previous와 next로 보이는 arrows
- 끊기지 않고 계속 슬라이딩이 이어지는 infinite
- 터치로 슬라이드 모션이 가능한 touchMove
- 마우스로 움직이는 draggable
진짜 딱 기본이죠? slick-theme.css를 같이 연결하면 저 네모 박스애들한테 화살표도 들어갑니다~
arrows가 필요 없으면 API를 수정하러 가면 됩니다.
$(document).ready(function(){
$('.slick-slider').slick({
arrows: false,
dots: true
});
});
API를 이용해서 dots를 ture 처리하면 저렇게 슬라이드 개수만큼 slick-dots 리스트가 생성됩니다.
각 dots는 <li> 요소 안에 <button>으로 들어가 있어요
slick-theme.css를 연결 안 해서 직접 css로 동그란 도트 모양을 만들어볼게요
https://codepen.io/jjinMangKo/pen/mdmKGxj
완성된 dots가 추가된 슬라이드 구여
<img> 요소 대신 background속성으로도 가능하고,
.slick-slider {
width: 100%;
}
.slick-slider img {
width: 100%;
height: auto;
}슬라이드를 꽉 차게 작업하려면 width값을 100%로 주면 됩니다.
그런 경우 아무래도 img보다는 background속성이 조금 더 편하고요.
그리고 이어서 dots를 가지고 놀아보도록 할 거예요
그 작업은 다음 포스팅에 해볼게요~
'플러그인 > slick' 카테고리의 다른 글
| 슬라이드 플러그인 Slick - API(3) (0) | 2021.08.08 |
|---|---|
| 슬라이드 플러그인 Slick - API(2) (0) | 2021.08.03 |