728x90
반응형
모바일 화면에서 사진 같은 것을 좌우로 밀어서 사진을 바꿔주는 swiper 기능
1. html 파일에 swiper css 파일 추가
|
1
|
<link rel="stylesheet" href="/js/swiper.min.css">
|
cs |
2. html 파일에 swiper.js 파일 추가
|
1
|
<script type="text/javascript" src="/js/swiper.js"></script>
|
cs |
3. 탭 html 구성
|
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
35
36
37
38
39
40
41
|
<div>
<ul>
<li class="tablinks active" id="tab1">Tab1</li>
<li class="tablinks" id="tab2">Tab2</li>
<li class="tablinks" id="tab3">Tab3</li>
</ul>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide-sub">
<!-- Tab1 내용 -->
<ul>
<li>li1</li>
<li>li2</li>
<li>li2</li>
</ul>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-sub">
<!-- Tab2 내용 -->
<ul>
<li>li1</li>
<li>li2</li>
<li>li2</li>
</ul>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-sub">
<!-- Tab3 내용 -->
<ul>
<li>li1</li>
<li>li2</li>
<li>li2</li>
</ul>
</div>
</div>
</div>
</div>
|
cs |
4. javascript 파일에서 swiper 사용설정
|
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
$(document).ready(function () {
init();
});
function init() {
var swiper = new Swiper('.swiper-container', {
autoHeight: true,
on: {
init: function () {
$(".swiper-slide").css("background-color", 'transparent');
$(".swiper-slide").css("text-align", 'left');
},
slideChange: function () {
var slider = this;
if (swiper.activeIndex == 0) {
$('#tab1').addClass('active');
$('#tab2').removeClass('active');
$('#tab3').removeClass('active');
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
} else if (swiper.activeIndex == 1) {
$('#tab1').removeClass('active');
$('#tab2').addClass('active');
$('#tab3').removeClass('active');
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
} else if (swiper.activeIndex == 2) {
$('#tab1').removeClass('active');
$('#tab2').removeClass('active');
$('#tab3').addClass('active');
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
}
}
});
$('#tab1').click(function () {
swiper.slideTo(0, 300, false);
});
$('#tab2').click(function () {
swiper.slideTo(1, 300, false);
});
$('#tab3').click(function () {
swiper.slideTo(2, 300, false);
});
}
|
cs |
공식 사이트 : https://swiperjs.com/
Swiper - Most Modern Mobile Touch Slider
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
728x90
반응형
'코딩 삽질' 카테고리의 다른 글
| [sql, oracle] 계정별 마지막 row (0) | 2020.02.28 |
|---|---|
| [d3] Line chart sample (0) | 2020.02.07 |
| [html, ajax] bootstrap 파일 업로드 progress bar (2) | 2019.12.17 |
| [java] split에 마침표(dot) 사용하기 (0) | 2019.12.11 |
| [weblogic] 500 에러 (2) | 2019.12.10 |