20th
slick 활용
👇 slick과 position 콜라보
<!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.06.13. slick 01</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/slick.css">
<link rel="stylesheet" href="../css/slick01.css">
</head>
<body>
<section class="main">
<div class="visual_slider">
<figure class="itm01"></figure>
<figure class="itm02"></figure>
<figure class="itm03"></figure>
</div>
<div class="slogan">
<h2>MY COMPANY</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br /> Dolores voluptatum blanditiis voluptates
dignissimos maiores, nesciunt nisi.<br /> Quae molestiae incidunt harum! </p>
</div>
<a href="#are" class="wheel">
<span>아래로가기</span>
</a>
</section>
<!-- 기준을 잡기 위해서 섹션 안에 만들어야함 -->
<div class="slider" id="are">
<figure>
<figure>
<img src="../img/mainvisual01.jpg" alt="">
</figure>
<figure>
<img src="../img/mainvisual02.jpg" alt="">
</figure>
<figure>
<img src="../img/mainvisual03.jpg" alt="">
</figure>
</div>
<div class="slider02">
<figure>
<img src="../img/lesedilarona01.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona02.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona03.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona04.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona05.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona06.jpg" alt="">
</figure>
</div>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/slick.min.js"></script>
<script src="../js/slick01.js"></script>
</body>
</html>
<!-- figure 이미지를 싸는 tag -->
<!-- slide를 div로 감싸고, 자식도 div로 하면 자식을 잡을 때 문제가 생긴다. slick에서 자동으로 생성되는 div가 2개 생기기 때문이다. 그래서 nth chlid잡기 힘들다. 그러려면 div에 class로 주던가 해야함===그래서 figure로 해야함
이미지(인라인 블록임)를 디스플레이 블록으로 만든다. 이미지를 가운데 오게 하기 힘들어짐 -->
<!-- 백그라운드 포지션을 줄 수 있다/채울 수 있다(높이, 넓이 등)
단, nth-child는 못 함 그래서 이르을 붙여서 하면 됨--><html, css>
$(function () {
$('.visual_slider').slick({
dots: true,
autoplay: true,
autoplaySpeed: 4000,
pauseOnHover: false,
});
$('.slider').slick({
autoplay: true,
arrows: false,
autoplaySpeed: 4000,
dots: true,
pauseOnHover: false,
});
$('.slider02').slick({
slidesToShow: 3,
});
})
// $(function)=document ready
// () 와 $()=함수
// ''는 문자이다. 문자가 아니면 숫자 또는 변수 또는 함수
// 무언가의 옵션을 주는 것이 매개변수. {}는 객체
// 자바스크립트에서는 줄바꾸기 큰 의미 없음
//arrows : prev next 없애는 것
//slidesToShow는 같은 숫자는 안 돌아감=이미지 3개인데 3을 주면 안됨<jquery>
👇 slick과 position 콜라보 2 & 현대엘리베이터 copy
<!DOCTYPE html>
<html lang="ko">
<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.06.14. slick02</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/slick.css">
<link rel="stylesheet" href="../css/slick02.css">
</head>
<body>
<section class="slide01">
<div class="main_slider">
<figure>
<img src="../img/mainvisual01.jpg" alt="">
</figure>
<figure>
<img src="../img/mainvisual02.jpg" alt="">
</figure>
<figure>
<img src="../img/mainvisual03.jpg" alt="">
</figure>
</div>
<div class="slider_arrows">
<i class="xi-arrow-left"></i>
<i class="xi-arrow-right"></i>
</div>
<div class="box">
<ul class="content">
<li class="on">⎝⍢⎠</li>
<li>⎝ᑒ⎠</li>
<li>⎝⍥⎠</li>
</ul>
<div class="num">
01 / 03</div>
</div>
</section>
<section class="slide02">
<div class="container">
<div class="left">
<div class="left_slider">
<figure>
<img src="../img/hd01.jpg" alt="">
</figure>
<figure>
<img src="../img/hd02.jpg" alt="">
</figure>
<figure>
<img src="../img/hd03.jpg" alt="">
</figure>
<figure>
<img src="../img/hd09.jpg" alt="">
</figure>
<figure>
<img src="../img/hd10.jpg" alt="">
</figure>
</div>
</div>
<div class="right">
<div class="l_arrow">
<i class="xi-arrow-left"></i>
<i class="xi-arrow-right"></i>
</div>
<div class="right_slider">
<figure>
<img src="../img/hd02.jpg" alt="">
</figure>
<figure>
<img src="../img/hd03.jpg" alt="">
</figure>
<figure>
<img src="../img/hd09.jpg" alt="">
</figure>
<figure>
<img src="../img/hd10.jpg" alt="">
</figure>
<figure>
<img src="../img/hd01.jpg" alt="">
</figure>
</div>
</div>
</div>
</section>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/slick.min.js"></script>
<script src="../js/slick02.js"></script>
</body>
</html><html, css>
$(function () {
$('.main_slider').on('init afterChange', function (e, s, c) {
console.log(e, s, c);
$('.slide01 .box .num').text("0" + (c ? c + 1 : 1) + " / " + "0" + s.slideCount);
$('.slide01 .content>li').eq(c).addClass('on').siblings().removeClass('on');
})
$('.main_slider').slick({
arrows: false,
dots: true,
centerMode: true,
centerPadding: '250px',
});
$('.slide01 .slider_arrows i:nth-child(1)').on('click', function () {
$('.main_slider').slick('slickPrev')
});
$('.slide01 .slider_arrows i:nth-child(2)').on('click', function () {
$('.main_slider').slick('slickNext')
});
$('.left_slider').slick({
arrows: false,
fade: true,
});
$('.right_slider').slick({
arrows: false,
slidesToShow: 4,
asNavFor: '.left_slider',
});
$('.slide02 .right i:nth-child(1)').on('click', function () {
$('.right_slider').slick('slickPrev')
});
$('.slide02 .right i:nth-child(2)').on('click', function () {
$('.right_slider').slick('slickNext')
});
})
// $(function)=document ready
//'slickNext' slick에서 만들어둔 명령어<js>
👇 메인비주얼 슬라이드
<!DOCTYPE html>
<html lang="ko">
<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.06.14. slick03//메인비주얼 슬라이드</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/slick.css">
<link rel="stylesheet" href="../css/slick03.css">
</head>
<body>
<div class="Wrap">
<header id="header">
<div class="container">
<h1>
<a href="/">
<img src="../img/grafflogo.png" alt="">
</a>
</h1>
<nav class="gnb">
<ul>
<li><a href="">MENU01</a></li>
<li><a href="">MENU02</a></li>
<li><a href="">MENU03</a></li>
<li><a href="">MENU04</a></li>
<li><a href="">MENU05</a></li>
</ul>
</nav>
</div>
</header>
<main id="main" role="main">
<section class="main_visual">
<div class="main_slider">
<figure class="itm01">
<div class="inner">
<h2>01. Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum aspernatur eligendi,
voluptates aut dolores iste sequi?</p>
<a href="">more</a>
</div>
</figure>
<figure class="itm02">
<div class="inner">
<h2>02. Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum aspernatur eligendi,
voluptates aut dolores iste sequi?</p>
<a href="">more 더 more</a>
</div>
</figure>
<figure class="itm03">
<div class="inner">
<h2>03. Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum aspernatur eligendi,
voluptates aut dolores iste sequi?</p>
<a href="">more</a>
</div>
</figure>
</div>
<div class="num"></div>
<ul class="custom_dots">
<li><a href=""><i class="xi-firefox"></i> Lorem, ipsum dolor. </a></li>
<li><a href=""><i class="xi-heart"></i> Lorem, ipsum dolor. </a></li>
<li><a href=""><i class="xi-twitter"></i> Lorem, ipsum dolor. </a></li>
</ul>
<div class="custom_arrow">
<i class="xi-arrow-left"></i>
<i class="xi-arrow-right"></i>
</div>
<div class="custom_play">
<i class="xi-pause"></i>
<i class="xi-play"></i>
</div>
</section>
</main>
<footer id="footer">
</footer>
</div>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/slick.min.js"></script>
<script src="../js/slick03.js"></script>
</body>
</html>
<!-- header/main/footer에 id를 쓰는 이유는 일이 단단해짐
figure을 사용하는 이유: slick은 div가 2개 생기기 때문 nth-child잡기 어려움-->
<!-- 높이 특정하면 안됨. paddig을 해서 부피감을 줘야함
높이가 특정되면 반응형에서 무너짐
단, 배경을 깔 때는 높이를 특정해야함
absolute도 높이는 변함없이 0이 되기 때문에 높이 특정해야함 -->
<!-- alr + z 한 화면 안에 내용이 다 들어옴 --><html, css>
$(function () {
var createNum = 0;
$('.main_slider').on('init afterChange', function (e, s, c) {
$('.main_slider figure.slick-current').addClass('on').siblings().removeClass('on');
$('.num').css({ backgroundPositionY: - 100 * createNum + "px" });
$('.custom_dots li').eq(0).addClass('on');
$('.custom_dots li').eq(c).addClass('on').siblings().removeClass('on');
createNum++;
//(createNum = createNum + 1) = createNum++;
})
//처음 붙여주는 이유는, 페이지를 열었을 때, 색이 바뀌는 효과를 얻기 위해서
$('.main_slider').slick({
arrows: false,
autoplay: true,
pauseOnHover: false,
pauseOnFocus: false,
autoplaySpeed: 4000,
});
$('.custom_dots a').on('click', function (e) {
e.preventDefault();
var idx = $(this).parent().index();
$('.main_slider').slick('slickGoTo', idx);
$('.num').css({ backgroundPositionY: -100 * idx + "px" });
createNum = idx;
});
$('.custom_arrow i:nth-child(1)').on('click', function () {
$('.main_slider').slick('slickPrev');
});
$('.custom_arrow i:nth-child(2)').on('click', function () {
$('.main_slider').slick('slickNext');
});
$('.custom_play i:nth-child(1)').on('click', function () {
$('.main_slider').slick('slickPause');
});
$('.custom_play i:nth-child(2)').on('click', function () {
$('.main_slider').slick('slickPlay');
});
})
// autoplaySpeed: 4000, 1000이 1초이고, slick기본이 3000(3초)임
//dots: true 외부에서 만들어 쓸 때는 노쓸모<js>
플러그인 중 하나인 slick
slick은 제이쿼리 1.7이상부터 움직이기 때문에 cafe24에서는 작동하지 않는다.
slick.js =/= slick.min.js(min 압축된 js) 을 사용하는 게 좋다.
jquery1.x 다운
https://releases.jquery.com/ ---> minified 다른 이름으로 링크 저장
jquery 1.12.4는 많은 브라우저 지원
html = <div classs = "on">
css = div.on
js = documentqueryselecto('div').classListadd('on')
$('div').addclass('on')
$('div').on('click'=이벤트, (매개변수)function(){
$(this=이벤트가 붙는 'div').toggleClass('on')
})
----------------------------------------------------->함수다
addclass
removeclass
toggleclass
hasclass
--->classlistadd
classlistremove
메인 슬라이드는 배경으로 깔아줌==background
'수업내용' 카테고리의 다른 글
| [HTML, CSS, jQuery] 탭메뉴 만들어보기 (0) | 2022.07.31 |
|---|---|
| [HTML, CSS] movie 01 & fullpage 01 (0) | 2022.07.31 |
| [HTML, CSS, jQuery] 다단메뉴와 반응형 + jQuery (0) | 2022.07.31 |
| [ HTML, CSS] 다양한 headerd의 nav메뉴 만들기 (0) | 2022.07.31 |
| [HTML, CSS] ::before와 ::after란 가상요소 선택자(pseudo element) (0) | 2022.07.31 |