forked from nolimits4web/swiper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path10-tabs.html
118 lines (117 loc) · 5.23 KB
/
10-tabs.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="../dist/idangerous.swiper.css">
<style>
/* Demo Styles */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
}
.tabs {
width: 642px;
margin: 0 auto;
}
.tabs a {
display: block;
float: left;
width: 200px;
color: #333;
text-align: center;
border-radius: 5px 5px 0 0;
border: 1px solid #ccc;
background: #fff;
line-height: 40px;
font-size: 25px;
font-style: italic;
text-decoration: none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ddd)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #ffffff, #ddd); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #ffffff, #ddd); /* FF3.6 */
background-image: -ms-linear-gradient(top, #ffffff, #ddd); /* IE10 */
background-image: -o-linear-gradient(top, #ffffff, #ddd); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #ffffff, #ddd);
}
.tabs a.active {
color: #fff;
background: #333;
background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #333, #000); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #333, #000); /* FF3.6 */
background-image: -ms-linear-gradient(top, #333, #000); /* IE10 */
background-image: -o-linear-gradient(top, #333, #000); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #333, #000);
border-bottom: 1px solid #000;
}
.swiper-container {
background: #333;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #000, #333); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #000, #333); /* FF3.6 */
background-image: -ms-linear-gradient(top, #000, #333); /* IE10 */
background-image: -o-linear-gradient(top, #000, #333); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #000, #333);
height: 250px;
border-radius: 0 0 5px 5px;
border: 1px solid #ccc;
width: 640px;
border-top: 0;
}
.swiper-slide {
height: 250px;
width: 640px;
background: none;
color: #fff;
}
.content-slide {
padding: 40px;
}
</style>
</head>
<body>
<div class="tabs"> <a href="#" class="active">Tab 1</a> <a href="#" style="margin:0 17px">Tab 2</a> <a href="#">Tab 3</a> </div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="content-slide">
<h2>Tabs Example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum tempus turpis ut tempus. Mauris dictum blandit lectus, a dictum erat dictum non. Etiam ultrices convallis interdum. Curabitur varius auctor enim, quis dictum nibh fringilla ut. Sed vel lacus ac odio molestie sodales quis sit amet lacus. Curabitur id porta eros. Fusce in varius nisi.</p>
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
<h2>Tab 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum tempus turpis ut tempus. Mauris dictum blandit lectus, a dictum erat dictum non. Etiam ultrices convallis interdum. Curabitur varius auctor enim, quis dictum nibh fringilla ut. Sed vel lacus ac odio molestie sodales quis sit amet lacus. Curabitur id porta eros. Fusce in varius nisi.</p>
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
<h2>Tab 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum tempus turpis ut tempus. Mauris dictum blandit lectus, a dictum erat dictum non. Etiam ultrices convallis interdum. Curabitur varius auctor enim, quis dictum nibh fringilla ut. Sed vel lacus ac odio molestie sodales quis sit amet lacus. Curabitur id porta eros. Fusce in varius nisi.</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="../dist/idangerous.swiper.min.js"></script>
<script>
var tabsSwiper = new Swiper('.swiper-container',{
onlyExternal : true,
speed:500
})
$(".tabs a").on('touchstart mousedown',function(e){
e.preventDefault()
$(".tabs .active").removeClass('active')
$(this).addClass('active')
tabsSwiper.swipeTo( $(this).index() )
})
$(".tabs a").click(function(e){
e.preventDefault()
})
</script>
</body>
</html>