bxSlider 예제9. 썸네일 페이징 - 방법2
2016. 7. 22. 23:31ㆍbxSlider/예제
반응형
9. Thumbnail pager - method 2
JS:
$('.bxslider').bxSlider({
buildPager: function(slideIndex){
switch(slideIndex){
case 0:
return '<img src="/images/thumbs/tree_root.jpg">';
case 1:
return '<img src="/images/thumbs/houses.jpg">';
case 2:
return '<img src="/images/thumbs/hill_fence.jpg">';
}
}
});
HTML:
<style type="text/css">
.bx-wrapper .bx-pager {
bottom: -95px;
}
.bx-wrapper .bx-pager a {
border: solid #ccc 1px;
display: block;
margin: 0 5px;
padding: 3px;
}
.bx-wrapper .bx-pager a:hover,
.bx-wrapper .bx-pager a.active {
border: solid #5280DD 1px;
}
.bx-wrapper {
margin-bottom: 120px;
}
</style>
<ul class="bxslider">
<li><img src="/images/730_200/tree_root.jpg" /></li>
<li><img src="/images/730_200/houses.jpg" /></li>
<li><img src="/images/730_200/hill_fence.jpg" /></li>
</ul>
반응형
'bxSlider > 예제' 카테고리의 다른 글
| bxSlider 예제11. 이전/다음 버튼의 사용자 정의 (0) | 2016.07.22 |
|---|---|
| bxSlider 예제10. 수직(세로방향) 슬라이드 (0) | 2016.07.22 |
| bxSlider 예제8. 썸네일 페이징 - 방법1 (0) | 2016.07.22 |
| bxSlider 예제7. 캐러셀 - 보여주는 슬라이드의 동적 수 (0) | 2016.07.22 |
| bxSlider 예제6. 캐러셀 - 보여주는 슬라이드의 고정 수 (0) | 2016.07.22 |