<!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>슬라이드 활용</title>
<link rel="stylesheet" href="./css/common.css" type="text/css">
<link rel="stylesheet" href="./css/slick.css" type="text/css">
<link rel="stylesheet" href="./css/slick-theme.css" type="text/css">
<style>
/* mainBanner1 영역 */
#mainBanner1 {
height: 440px;
position: relative;
}
.mb {
width: 100%;
height: 440px;
}
/* mainBanner2 영역 */
#mainBanner2 {
padding: 100px 0px;
}
.sns {
height: 206px;
}
.sns li {
width: calc(100% / 5);
}
.sns li img {
width: 100%;
}
/* mainBanner3 영역 */
.banner {
height: 500px;
}
.banner li {
margin: 0px 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/slick.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () { // 문서 준비 이벤트
$(".mb").slick({
autoplay: true,
autoplaySpeed: 3000,
dots: true
});
$(".sns").slick({
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 5, // 한 줄에 보이는 슬라이드 수
slidesToScroll: 1 // 한 번의 슬라이드에 몇 번 넘어가는지, 1장씩 넘어감
});
$(".banner").slick ({
autoplay: true,
autoplaySpeed: 5000,
centerMode: true,
centerPadding: '150px',
slidesToShow: 2,
dots: true
});
});
</script>
</head>
<body>
<div id="wrap">
<section id="mainBanner1">
<ul class="mb">
<li><a href="#"><img src="./images/mv_01.jpg" alt="배너1"></a></li>
<li><a href="#"><img src="./images/mv_02.jpg" alt="배너2"></a></li>
<li><a href="#"><img src="./images/mv_03.jpg" alt="배너3"></a></li>
</ul>
</section> <!-- mainBanner1 end -->
<section id="mainBanner2" class="inner">
<ul class="sns">
<li><a href="#"><img src="./images/sns_01.jpg" alt="sns_01 image"></a></li>
<li><a href="#"><img src="./images/sns_02.jpg" alt="sns_02 image"></a></li>
<li><a href="#"><img src="./images/sns_03.jpg" alt="sns_03 image"></a></li>
<li><a href="#"><img src="./images/sns_04.jpg" alt="sns_04 image"></a></li>
<li><a href="#"><img src="./images/sns_05.jpg" alt="sns_05 image"></a></li>
<li><a href="#"><img src="./images/sns_06.jpg" alt="sns_06 image"></a></li>
<li><a href="#"><img src="./images/sns_07.jpg" alt="sns_07 image"></a></li>
<li><a href="#"><img src="./images/sns_08.jpg" alt="sns_08 image"></a></li>
<li><a href="#"><img src="./images/sns_09.jpg" alt="sns_09 image"></a></li>
<li><a href="#"><img src="./images/sns_10.jpg" alt="sns_10 image"></a></li>
</ul>
</section> <!-- mainBanner2 end -->
<section id="mainBanner3">
<ul class="banner">
<li><a href="#"><img src="./images/mb_01.jpg" alt="mb_01 image"></a></li>
<li><a href="#"><img src="./images/mb_02.jpg" alt="mb_02 image"></a></li>
<li><a href="#"><img src="./images/mb_03.jpg" alt="mb_03 image"></a></li>
<li><a href="#"><img src="./images/mb_04.jpg" alt="mb_04 image"></a></li>
<li><a href="#"><img src="./images/mb_05.jpg" alt="mb_05 image"></a></li>
</ul>
</section> <!-- mainBanner3 end -->
</div> <!-- wrap end -->
</body>
</html>
Engineering is the closest thing to magic that exists in the world.