728x90
반응형
이미지 슬라이더 플러그인 bxslider 응용 방법입니다.
1. <head> </head> 태그 안에 제이쿼리와 bxslider 스크립트를 불러옵니다.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
2. CSS
.slide_wrap { width: 800px; height: 400px; position: relative; }
.slide_img { z-index: 1; }
.slide_img .img1 { width: 800px; height: 400px; background: url('이미지경로') center center no-repeat; background-size: cover; }
.slide_img .img2 { width: 800px; height: 400px; background: url('이미지경로') center center no-repeat; background-size: cover; }
.slide_img .img3 { width: 800px; height: 400px; background: url('이미지경로') center center no-repeat; background-size: cover; }
.slide_img .slide_txt { position: absolute; top: 150px; left: 100px; font-size: 14px; color: #fff; }
.slide_img .slide_txt b { font-size: 28px; font-weight: bold; color: #000; }
/* 좌우 이전 다음 버튼 */
.bx-prev { width: 40px; height: 40px; position: absolute; top: 170px; left: 10px; z-index: 2; cursor: pointer; background: url('이미지경로') no-repeat; font-size: 0; line-height: 0; }
.bx-next { width: 40px; height: 40px; position: absolute; top: 170px; right: 10px; z-index: 2; cursor: pointer; background: url('이미지경로') no-repeat; font-size: 0; line-height: 0; }
/* 하단 페이지 버튼 */
.bx-pager { position: absolute; left: 50%; bottom: 30px; z-index: 2; }
.bx-pager.bx-default-pager a { display: block; width: 8px; height: 8px; margin: 0 5px; background: url('이미지경로') no-repeat; }
.bx-pager.bx-default-pager a:hover, .bx-pager.bx-default-pager a.active { background: url('이미지경로') no-repeat; }
.bx-pager-item, .bx-controls-auto .bx-controls-auto-item { float: left; }
.bx-pager-item { font-size: 0; line-height: 0; }
3. HTML
<div class="slide_wrap">
<ul class="slide_img">
<li class="img1">
<p class="slide_txt"><b>제목입니다.</b><br />부제 테스트입니다.</p>
</li>
<li class="img2">
<p class="slide_txt"><b>제목입니다.</b><br />부제 테스트입니다.</p>
</li>
<li class="img3">
<p class="slide_txt"><b>제목입니다.</b><br />부제 테스트입니다.</p>
</li>
</ul>
</div>
4. Script
<script type="text/javascript">
$(document).ready(function(){
$(".slide_img").bxSlider({
mode: "fade",
speed: 500,
pause: 3000,
auto: true,
controls: true,
pager: true,
});
});
</script>
728x90