jQuery Content Slider | Responsive jQuery Slider | bxSlider
Coded with ♥ by
bxslider.com
bxslider.com에서 코드만 복사해서 vsc에 붙여넣고 사용하면 되는 간단한 사용법
사이트에 접속하여 아래의 Click here to install을 클릭한다.
코드를 복사하여 vsc에 붙여 넣는다.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').bxSlider();
});
</script>
</head>
<body>
<div class="slider">
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>
</body>
</html>
body태그에 원하는 이미지를 삽입하면 된다.
이미지는 이곳에서 가져와서 사용했다.
<div>
<ul class="bxslider">
<li><a href="#"><img src="/img/img1.jpg" alt="img1"></a></li>
<li><a href="#"><img src="/img/img2.jpg" alt="img2"></a></li>
<li><a href="#"><img src="/img/img3.jpg" alt="img3"></a></li>
<li><a href="#"><img src="/img/img4.jpg" alt="img4"></a></li>
<li><a href="#"><img src="/img/img5.jpg" alt="img5"></a></li>
</ul>
</div>
왼쪽에 치우치는 걸 가운데로 정렬하기 위해서 id값을 주고 가운데로 정렬하였다.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<style>
#inner {
max-width: 1500px;
margin: 0 auto;
}
.bxslider li img{
width: 1500px;
height: 600px;
}
</style>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
speed: 500,
pause: 5000,
mode: 'horizontal',
autoControls:true,
pager: true,
captions:true,
});
});
</script>
</head>
<body>
<div id="inne">
<ul class="bxslider">
<li><a href="#"><img src="/img/img1.jpg" alt="img1"></a></li>
<li><a href="#"><img src="/img/img2.jpg" alt="img2"></a></li>
<li><a href="#"><img src="/img/img3.jpg" alt="img3"></a></li>
<li><a href="#"><img src="/img/img4.jpg" alt="img4"></a></li>
<li><a href="#"><img src="/img/img5.jpg" alt="img5"></a></li>
</ul>
</div>
</body>
</html>