[HTML, CSS with JS] slick을 활용_2022.05.31.TUE
12th DAY반응형
slick을 활용하여 슬라이드 이미지 만들어보기
:slick, position, transform, transition활용
슬라이드?
slick 활용해서 멋드러지게 만들기 완전 가능!
https://kenwheeler.github.io/slick/
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io
Download now로 해서 다운받아서 사용하거나,
css부분 ➡ //cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
오른쪽 클릭 ➡ '다른이름으로 링크저장'해서 사용가능하다.
다운로드 받아서 사용하는 경우 slick.min.js을 사용해야 한다.
❗slick.min.js(=/같지 않음)slick.js❗
View On Github에 들어가면 event, setting관련으로 자세하게 볼 수 있다.
<!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>2022.05.31.TUE_slick01</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/slick.css">
<link rel="stylesheet" href="../css/slick01.css">
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/slick.min.js"></script>
<script src="../js/slick01.js"></script>
</head>
<body>
<section class="main_visual">
<div class="main_slider">
<figure class="itm01 itm">
<div class="inner">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Quas ullam autem quia blanditiis,
facilis magnam. </p>
<a href="">more</a>
</div>
</figure>
<figure class="itm02 itm">
<div class="inner">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Quas ullam autem quia blanditiis,
facilis magnam. </p>
<a href="">more the more</a>
</div>
</figure>
<figure class="itm03 itm">
<div class="inner">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Quas ullam autem quia blanditiis,
facilis magnam. </p>
<a href="">more</a>
</div>
</figure>
</div>
<div class="num">
1
</div>
</section>
</body>
</html>
<!-- 이미지가 디스플레이 블록이 된다.
text-align: center를 했는데, 센터에 안 오면 마진을 줘서 센터에 오도록 해야함
slick.min.js를 가지고 오면 박스를 두개 싸고,
번호를 특정하기 힘들어, nth:chlid를 하면 낭패임 -->
<!-- figure.itm0$.itm*3> --><html>
❗slick을 사용하는 경우,
link를 reset.css와 내가 사용할 css파일 사이에 link 추가해둬야 한다
❗자바스크립트도 마찬가지로 link 순서가
1. jquery.js
2. slick.min.js
3. 내가 작성할 js
.main_visual {
}
.main_visual .main_slider {
}
.main_visual .main_slider figure {
position: relative;
height: 600px;
}
/* 포지션 릴레이티브를 주는 이유는, 슬라이드 사진3개가 쌓여있으니 .inner에 포지션 absolute를 주면 맨 위에 있는 사진에만 글이 있어서 이너를 싸고 있는 거에 붙기 떄문에 피규어에 릴레이티를 줘야함 */
.main_visual .main_slider .itm01 {
background: url(../img/mainvisual01.jpg) no-repeat center top/cover;
}
.main_visual .main_slider .itm02 {
background: url(../img/mainvisual02.jpg) no-repeat center center/cover;
}
.main_visual .main_slider .itm03 {
background: url(../img/mainvisual03.jpg) no-repeat center center/cover;
}
.main_visual .main_slider .slick-arrow {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
width: 100px;
height: 100px;
font-size: 0;
border: none;
background: transparent;
outline: none;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
}
/* background: transparent; 배경 투명하게 */
/* previous가 next의 아래로 내려가 있어서 제트 인덱스 해줘야함
margin을 이용해서 p랑 n을 떨어뜨려둠 */
.main_visual .main_slider .slick-prev {
margin: 0 0 0 -700px;
transform: translate(-50%, -50%) rotate(-45deg);
}
.main_visual .main_slider .slick-next {
margin: 0 0 0 700px;
transform: translate(-50%, -50%) rotate(135deg);
}
/* transform은 뒤에 온게 앞에 꺼를 덮어쓰기 때문에 인라인에 줘야함 */
/* transform은 움직이고, 돌리는 거랑 돌리고 움직이는 거랑 좌표가 다름 */
.main_visual .main_slider .slick-dots {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
}
.main_visual .main_slider .slick-dots li {
display: inline-block;
width: 80px;
height: 5px;
background: #555;
margin: 0 3px;
}
.main_visual .main_slider .slick-dots li.slick-active {
background: darkkhaki;
}
.main_visual .main_slider .slick-dots button {
display: none;
}
/* (사이트 검사에 있는 그대로)슬라이드가 만들어주는 걸 보고 만드는 것이 편함 */
.main_visual .main_slider .inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1200px;
color: #fff;
text-shadow: 0 0 3px #000;
}
.main_visual .main_slider .inner h3 {
font-size: 50px;
font-weight: 700px;
margin: 0 0 20px 0;
}
.main_visual .main_slider .inner p {
font-size: 15px;
font-weight: 300px;
margin: 0 0 20px 0;
line-height: 1.4;
}
.main_visual .main_slider .inner a {
display: inline-block;
padding: 5px 30px 8px 30px;
background: #333;
border: 1px solid #fff;
}
/* (별표) display: inline-block;을 주는 이유는 폰트의 길이가 다르기 때문에
폰트 길이에 따라 유동적으로 늘어날 수 있도록!
**display: inline-block으로 된 박스를 가운데 오게 하는 방법은 부모에 텍스트 얼라인을 주면 됨*/
.main_visual .main_slider .inner a:hover {
background: #fff;
color: #333;
border: 1px solid #333;
}
.main_visual .main_slider figure h3 {
transform: translateY(100px);
opacity: 0;
}
.main_visual .main_slider figure.xoxo h3 {
transform: translateY(0);
opacity: 1;
transition: 0.5s;
}
.main_visual .main_slider figure p {
transform: translateY(100px);
opacity: 0;
}
.main_visual .main_slider figure.xoxo p {
transform: translateY(0);
opacity: 1;
transition: 0.5s 0.5s;
}
/* transition: 0.5s(타이밍 펑션) 0.5s(타이밍 딜레이); 0.5초 딜레이 */
.main_visual .main_slider figure a {
transform: translateY(100px);
opacity: 0;
}
.main_visual .main_slider figure.xoxo a {
transform: translateY(0);
opacity: 1;
transition: opacity 0.5s 1s, transform 0.5s 1s;
}
/* transition: 0.5s(타이밍 펑션) 1s(타이밍 딜레이); 1초 딜레이 */
/* transition: opacity 0.5s 1s, transform 0.5s 1s;
:trasition이 되어야 하는 것들을 죄다 넣어줘야함*/<css>
▪ background: transparent; 배경 투명하게
▪ transform은
움직이고➡ 돌리는 거
돌리고➡움직이는 거랑
좌표가 다름
position: relative;를 주는 이유는
슬라이드 사진3개가 쌓여있으니 .inner에position:absolute를 주면, 맨 위에 있는 사진에만 글이 나타난다.
그래서 이너를 싸고 있는 거에 붙기 때문에 figure에
position: relative를 줘야한다.
✍이거 아주 중요✍
display: inline-block;을 주는 이유는 폰트의 길이가 다르기 때문에 폰트 길이에 따라 유동적으로 늘어날 수 있도록!
display: inline-block으로 된 박스를 가운데 오게 하는 방법은 부모에 text-align을 주면 된다.
transition: 0.5s(timing-function) 1s(timing-function); 1초 딜레이
transition: opacity 0.5s 1s, transform 0.5s 1s;
:trasition이 되어야 하는 것들을 죄다 넣어줘야함
〰transform 0.5s 1s;을 주는 이유는 :hover 부분에서 마우스를 올리면 색이 변하고, 마우스를 내리면 바로 원래 색으로 바뀔 수 있게 하려고 하는 것.
$(function () {
$('.main_slider').on('init reInit afterChange', function(e,s,c) {
console.log(e,s,c);
$('.num').text((c ? c + 1 : 1)+ "/" +s.slideCount);
let cur = $('.slick-current');
cur.addClass('xoxo').siblings().removeClass('xoxo')
});
$('.main_slider').slick({
dots: true,
autoplay:true,
autoplaySpeed: 4000,
pauseOnHover: false,
pauseOnFocus: false,
});
})
// dots: true=도트 나와라
// e,s,c = event, slick, currentSlide
// pause:true,<JavaScript>
dots: true=도트 나와라
e,s,c = event, slick, currentSlide
pauseOnHover:false,➡마우스 호버 시 슬라이드 멈추지 말 것
pauseOnFocus:false,➡마우스포커스 시 슬라이드 멈추지 말 것
결과물 : http://127.0.0.1:5502/doc/position03.html
+ MEMO +
▪ 제이쿼리->slick을 이용(쓰기 편하고, 액션 좋고, 거의 모든 기능 가지고 있음)
또는 swiper(이쁘면 유료버전 사용 해야함)
!react에도 slick이 있어, 돌릴 수 있음!!
🔸position(이전에 정리해둔 거 참조)🔸
1. static: 다단형, 반응형 만들 때 사용
2. relative:
3. absolute
4. fixed--모바일에서 중요
5. sticky : IE에서 안 돌아감. 메뉴가 있고, 스크롤을 내려도 메뉴가 그대로 있는 것(=포지션을 안 가지고 있다가 스크롤에 반응하도록 함)
자바(?) 스티키 표현할 수 있음-->방법이 훨씬 간단
position: fixed
width : 100%
top : 0 auto
= 어느 정도 스크롤을 내리면 fixed 되어라