1. bx-slider 플러그인 가져오기
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<link rel="stylesheet" href="css/style.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 src="js/script.js"></script>
HTML
복사
2. bxslider HTML 레이아웃 코드
<div class="wrap">
<div class="slide-container">
<div class="slide"><img src="img/slide01.jpg" alt="" title="이미지01"></div>
<div class="slide"><img src="img/slide02.jpg" alt="" title="이미지02"></div>
<div class="slide"><img src="img/slide03.jpg" alt="" title="이미지03"></div>
<div class="slide"><img src="img/slide04.jpg" alt="" title="이미지04"></div>
<div class="slide"><img src="img/slide05.jpg" alt="" title="이미지05"></div>
<div class="slide"><img src="img/slide06.jpg" alt="" title="이미지06"></div>
</div>
</div>
HTML
복사
3. 기본 스타일 적용하기
.wrap {
width: 1200px;
height: 480px;
margin: 200px auto;
}
/* 슬라이드 */
.slide {
width: auto;
height: 480px;
}
/* 슬라이드 이미지 */
.slide img { width: 100%; height: 100%; }
/* 기본 커스텀 */
.bx-wrapper {
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
border: 0px solid #fff;
background: #fff;
}
HTML
복사
페이지네이션 커스텀
/************** 페이지네이션 커스텀 **************/
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
bottom: 20px; /* 페이지 네이션 슬라이드 안으로 */
}
/* 페이지네이션 커스텀 - 닷츠 */
.bx-wrapper .bx-pager.bx-default-pager a {
background-color: #fff;
}
/* 페이지네이션 커스텀 - 활성화된 닷츠 */
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
background-color: pink;
}
.bx-wrapper .bx-pager.bx-default-pager a {
border-radius: 0;
width: 20px;
height: 5px;
}
CSS
복사
화살표 커스텀
/************** 네비게이션 화살표 커스텀 **************/
.bx-wrapper .bx-prev { background: url(../img/prev.png) no-repeat left center; background-size: 32px 32px;}
.bx-wrapper .bx-next { background: url(../img/next.png) no-repeat left center; background-size: 32px 32px;}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus { background-position: 0 0; }
.bx-wrapper .bx-prev:hover { filter: brightness(60%); }
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus { background-position: 0 0; }
.bx-wrapper .bx-next:hover { filter: brightness(60%); }
CSS
복사
4. script 코드 적용하기
$(function(){
// bx-slider 시작!
$('.slide-container').bxSlider({
mode: 'horizontal', // 페이드 효과로 슬라이드 : 'horizontal', 'vertical', 'fade'
captions: true, // 이미지 하단의 제목
slideWidth: 1200, // 슬라이드 가로 크기 지정
auto: true, // 자동재생
pause: 2000, // 슬라이드 당 재생 시간 (ms)
autoControls: true, // 재생버튼, 중지버튼
stopAutoOnClick: true, // 클릭할 때, 자동재생 멈춤
pager: true, // 페이지네이션
speed: 500, // 슬라이드가 전환되는 시간 (ms)
keyboardEnabled: true, // 키보드 사용가능 여부
moveSlides: 1, // 전환될 슬라이드 개수
minSlides: 3, // 최소 슬라이드 개수
maxSlides: 4, // 최대 슬라이드 개수
});
});
JavaScript
복사