bxslider 질문입니다.
본문
메인이미지 슬라이드에 썸네일이 필요해서 bxslider에 pagerCustom을 사용하고 있습니다.
$(document).ready(function(){
$(".bxslide").bxSlider({
auto: true,
speed: 500,
pause: 4000,
minSlides:1,
maxSlides:1,
mode:'fade',
pager:true,
pagerCustom:'#thumnail' <-썸네일페이징입니다.
});
});
썸네일은 나오는데 혹시 이미지 슬라이드가 되었을 때 해당 이미지의 썸네일에 border라던가, css등을 추가할 수 있을까요?
답변 1
예시)
페이징예시를 아래처럼 구성할경우
<div id="thumnail" >
<ul>
<li><a data-slide-index="0" href="#"><img ></a></li>
<li><a data-slide-index="1" href="#"><img ></a></li>
<li><a data-slide-index="2" href="#"><img ></a></li>
</ul>
</div>
스크립트실행시 슬라이드 되는 a태그에 class="active" 가 추가되는 것 같던데..
#thumnail li a.active{ }
이런식으로 css 추가하면 되지 않을까 싶으니 테스트 해보시기 바랍니다.
감사합니다 :)