<!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/jquery.bxslider.css" type="text/css">
<style>
.mb {
height: 440px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/jquery.bxslider.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () { // 문서 준비 이벤트
var slider = $(".mb").bxSlider ({
auto: true, // 자동 슬라이드
// mode: "fade", // 점점 사라지는 모드
// mode : "vertical"
// pager : false // 밑에 나오는 숫자 안 보이게 설정
});
});
</script>
</head>
<body>
<section id="mainSlide">
<ul class="mb">
<li><a href="#"><img src="./images/mv_01.jpg" alt="맛도 가격도 놀라운 이달의 썹! 프라이즈"></a></li>
<li><a href="#"><img src="./images/mv_02.jpg" alt="썹! 프라이즈"></a></li>
<li><a href="#"><img src="./images/mv_03.jpg" alt="치킨 마리나라 플랫브레드"></a></li>
</ul>
</section>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.