bxslider 이미지 슬라드, 버튼 클릭해 이미지 슬라이드, 이미지 슬라이더, 이미지 넘어가기
bxslider 이미지 슬라드, 버튼 클릭해 이미지 슬라이드, 이미지 슬라이더, 이미지 넘어가기 버튼이나 택스트를 클릭하면 또는 자동으로 이미지를 넘겨야 할 때가 있다. 이럴 때 사용하는 것이 bxslider 다. js 플러그인 다운로드는 아래의 홈페이지를 참고한다. Link : bxslider.com 홈페이지
홈페이지에 들어가면 우측 상단에서 다운 받을 수 있다.
다운받아 압축을 푼 폴더에서 아래의 세개의 파일을 원하는 위치에 복사하고
사용하고자 하는 페이지에서 불러온다.
<head>
<%@ include file="/common/headlibs.jsp" %>
<script src="<c:url value="/js/jquery.bxslider.js" />"></script>
<script src="<c:url value="/js/jquery.bxslider.min.js" />"></script>
<link rel="stylesheet" type="text/css" href="${ctx }/css/boilerplate.css" />
</head>
그리고 슬라이드할 이미지들을 <ul>의 <li> 태그에 넣는다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<body>
<p class="guideti">
<a id="slider-prev" href="#"><img src="${ctx }/images/guide_btn_prev.png" alt="" /></a>
<strong id='titleText'>첫번째 이미지</strong>
<a id="slider-next" href="#"><img src="${ctx }/images/guide_btn_next.png" alt="" /></a>
</p>
<ul class="imagebox">
<li><img src="${ctx }/images/guide_img01.png" /></li>
<li><img src="${ctx }/images/guide_img02.png" /></li>
<li><img src="${ctx }/images/guide_img03.png" /></li>
<li><img src="${ctx }/images/guide_img04.png" /></li>
<li><img src="${ctx }/images/guide_img05.png" /></li>
<li><img src="${ctx }/images/guide_img06.png" /></li>
</ul>
<ul class="text" id="explanation">
<li><em>1</em>첫번째 이미지</li>
<li><em>2</em>첫번째 이미지에 대한 설명</li>
</ul> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 |
<script type="text/javascript">
$(function(){
var sliderImage = $('.imagebox').bxSlider({
auto: false, //자동넘어가기
autoControls: false, //play, stop
pager: false, //페이지
nextSelector: '#slider-next', //다음으로 넘길 객체
prevSelector: '#slider-prev', //이전으로 넘길 객체
nextText:'', //객체 텍스트
prevText:'' //객체 텍스트
});
//기타옵션
// mode : 'fade', //슬라이드 방식 default : 'horizontal', options: 'horizontal', 'vertical', 'fade'
// autoHover: true //마우스 오버시 정지 여부
// controls: false // 이전 다음 버튼 노출 여부
//아래는 이미지버튼을 클릭했을 때 이미지를 넘어가게 하기 위한 이벤트다.
$('#slider-next').click(function(){ //다음이미지 클릭 시
sliderImage.goToNextSlide();
return false;
});
$('#slider-prev').click(function(){ //이전 이미지 클릭 시
sliderImage.goToPrevSlide();
return false;
});
});
</script>
</body> |
cs |
현재 이미지에 따라 기타 다른 이벤트를 발생하고 싶을 때는 getCurrentSlide() 을 사용해 처리한다.
getCurrentSlide()의 인덱스는 0부터 시작한다. (첫번째 이미지 0, 두번째 1..)
ex)
changeTitle(sliderImage.getCurrentSlide()); //이전, 다음 이미지 클릭시에 추가한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
function changeTitle(imageNum){
var html = '';
if(imageNum==0){
$("#titleText").text("첫번째 이미지");
html += "<li><em>1</em>첫번째 이미지</li>";
html += "<li><em>2</em>첫번째 이미지에 대한 설명</li>";
}else if(imageNum==1){
$("#titleText").text("두번째 이미지");
html += "<li><em>1</em>두번째 이미지</li>";
html += "<li><em>2</em>두번째 이미지에 대한 설명</li>";
}else{ //중간 생략
$("#titleText").text("세번째 이미지");
html += "<li><em>1</em>세번째 이미지</li>";
html += "<li><em>2</em>세번째 이미지에 대한 설명</li>";
}
$("#explanation").html(html);
} |
cs |
이렇게 하면 이미지가 바뀔때마다 기타 다른 텍스트를 수정할 수 있다.
구현된 것 확인↓