GoToPage 클래스를 누르면 페이지가 이동된다.
현재 페이지를 전역으로 선언하고
swiper에서 슬라이드 넘길때 현재 페이지 index값을 가져와서 저장 한다.
이후 버튼 눌렀을 때 현재 페이지의 다음 페이지로 넘어가도록 한다.
|
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
29
30
31
32
33
34
|
<script>
var activePage = 0; // 슬라이드 현재 페이지
var total_count = 5; // 슬라이드 전체 페이지
// 스와이퍼 생성
var swiperSlide= new Swiper(".swiperSlide", {
loop : true,
speed : 500,
autoplay: {
delay: 10000,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on : {
slideChange : function(){ // 슬라이드 넘겼을때 이벤트
activePage = this.activeIndex;
if(activePage > total_count) activePage = 1;
if(activePage <= 0) activePage = total_count;
}
}
});
//스와이퍼 - 페이지 특정 페이지로 이동
$(".GoToPage").click(function(){
var NextPage = activePage + 1;
swiperSlide.slideTo(NextPage, 400);
});
</script>
|
cs |
'개발 > Javascript' 카테고리의 다른 글
| javascript ) c3.js를 이용한 차트 표시 (0) | 2023.12.09 |
|---|---|
| Javascript) 정규식 모음 (0) | 2022.04.01 |
| Javascript) 배열 추가, 삭제 (0) | 2022.04.01 |