First Commit
This commit is contained in:
Kevin Adametz
commit
610aa1e202
4204 changed files with 636764 additions and 0 deletions
70
_static/assets/plugins/slider.swiper/demos/01-default.html
Normal file
70
_static/assets/plugins/slider.swiper/demos/01-default.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
81
_static/assets/plugins/slider.swiper/demos/03-vertical.html
Normal file
81
_static/assets/plugins/slider.swiper/demos/03-vertical.html
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
direction: 'vertical'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
slidesPerView: 3,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
width: 80%;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.swiper-slide:nth-child(2n) {
|
||||
width: 60%;
|
||||
}
|
||||
.swiper-slide:nth-child(3n) {
|
||||
width: 40%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
slidesPerView: 'auto',
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
87
_static/assets/plugins/slider.swiper/demos/07-centered.html
Normal file
87
_static/assets/plugins/slider.swiper/demos/07-centered.html
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
width: 60%;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.swiper-slide:nth-child(2n) {
|
||||
width: 40%;
|
||||
}
|
||||
.swiper-slide:nth-child(3n) {
|
||||
width: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
slidesPerView: 4,
|
||||
centeredSlides: true,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
width: 60%;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.swiper-slide:nth-child(2n) {
|
||||
width: 40%;
|
||||
}
|
||||
.swiper-slide:nth-child(3n) {
|
||||
width: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: true,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
80
_static/assets/plugins/slider.swiper/demos/09-freemode.html
Normal file
80
_static/assets/plugins/slider.swiper/demos/09-freemode.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
slidesPerView: 3,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
freeMode: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
height: 200px;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
slidesPerView: 3,
|
||||
slidesPerColumn: 2,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
95
_static/assets/plugins/slider.swiper/demos/11-nested.html
Normal file
95
_static/assets/plugins/slider.swiper/demos/11-nested.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.swiper-container-v {
|
||||
background: #eee;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container swiper-container-h">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Horizontal Slide 1</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-container swiper-container-v">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Vertical Slide 1</div>
|
||||
<div class="swiper-slide">Vertical Slide 2</div>
|
||||
<div class="swiper-slide">Vertical Slide 3</div>
|
||||
<div class="swiper-slide">Vertical Slide 4</div>
|
||||
<div class="swiper-slide">Vertical Slide 5</div>
|
||||
</div>
|
||||
<div class="swiper-pagination swiper-pagination-v"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">Horizontal Slide 3</div>
|
||||
<div class="swiper-slide">Horizontal Slide 4</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination swiper-pagination-h"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiperH = new Swiper('.swiper-container-h', {
|
||||
pagination: '.swiper-pagination-h',
|
||||
paginationClickable: true,
|
||||
spaceBetween: 50
|
||||
});
|
||||
var swiperV = new Swiper('.swiper-container-v', {
|
||||
pagination: '.swiper-pagination-v',
|
||||
paginationClickable: true,
|
||||
direction: 'vertical',
|
||||
spaceBetween: 50
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
width: 60%;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.swiper-slide:nth-child(2n) {
|
||||
width: 40%;
|
||||
}
|
||||
.swiper-slide:nth-child(3n) {
|
||||
width: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
slidesPerView: 4,
|
||||
centeredSlides: true,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
grabCursor: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
82
_static/assets/plugins/slider.swiper/demos/13-scrollbar.html
Normal file
82
_static/assets/plugins/slider.swiper/demos/13-scrollbar.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
width: 250px;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Scrollbar -->
|
||||
<div class="swiper-scrollbar"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
scrollbar: '.swiper-scrollbar',
|
||||
scrollbarHide: true,
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: true,
|
||||
spaceBetween: 30,
|
||||
grabCursor: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
spaceBetween: 30
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
slidesPerView: 1,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
loop: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)"></div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination swiper-pagination-white"></div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next swiper-button-white"></div>
|
||||
<div class="swiper-button-prev swiper-button-white"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
spaceBetween: 30,
|
||||
effect: 'fade'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #fff;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: -150px;
|
||||
}
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
effect: 'cube',
|
||||
grabCursor: true,
|
||||
cube: {
|
||||
shadow: true,
|
||||
slideShadows: true,
|
||||
shadowOffset: 20,
|
||||
shadowScale: 0.94
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #fff;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/9)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/10)"></div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
effect: 'coverflow',
|
||||
grabCursor: true,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 'auto',
|
||||
coverflow: {
|
||||
rotate: 50,
|
||||
stretch: 0,
|
||||
depth: 100,
|
||||
modifier: 1,
|
||||
slideShadows : true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
slidesPerView: 1,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
keyboardControl: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
direction: 'vertical',
|
||||
slidesPerView: 1,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
mousewheelControl: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
90
_static/assets/plugins/slider.swiper/demos/21-autoplay.html
Normal file
90
_static/assets/plugins/slider.swiper/demos/21-autoplay.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
centeredSlides: true,
|
||||
autoplay: 2500,
|
||||
autoplayDisableOnInteraction: false
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.append-buttons {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.append-buttons a {
|
||||
display: inline-block;
|
||||
border: 1px solid #007aff;
|
||||
color: #007aff;
|
||||
text-decoration: none;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
margin: 0 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
<p class="append-buttons">
|
||||
<a href="#" class="prepend-2-slides">Prepend 2 Slides</a>
|
||||
<a href="#" class="prepend-slide">Prepend Slide</a>
|
||||
<a href="#" class="append-slide">Append Slide</a>
|
||||
<a href="#" class="append-2-slides">Append 2 Slides</a>
|
||||
</p>
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var appendNumber = 4;
|
||||
var prependNumber = 1;
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
slidesPerView: 3,
|
||||
centeredSlides: true,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
});
|
||||
document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
swiper.prependSlide([
|
||||
'<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
|
||||
'<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
|
||||
]);
|
||||
});
|
||||
document.querySelector('.prepend-slide').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
|
||||
});
|
||||
document.querySelector('.append-slide').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
|
||||
});
|
||||
document.querySelector('.append-2-slides').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
swiper.appendSlide([
|
||||
'<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
|
||||
'<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #000;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.gallery-top {
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
.gallery-thumbs {
|
||||
height: 20%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.gallery-thumbs .swiper-slide {
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.gallery-thumbs .swiper-slide-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container gallery-top">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
|
||||
</div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next swiper-button-white"></div>
|
||||
<div class="swiper-button-prev swiper-button-white"></div>
|
||||
</div>
|
||||
<div class="swiper-container gallery-thumbs">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var galleryTop = new Swiper('.gallery-top', {
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
spaceBetween: 10,
|
||||
loop:true,
|
||||
loopedSlides: 5, //looped slides should be the same
|
||||
});
|
||||
var galleryThumbs = new Swiper('.gallery-thumbs', {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 4,
|
||||
touchRatio: 0.2,
|
||||
loop:true,
|
||||
loopedSlides: 5, //looped slides should be the same
|
||||
slideToClickedSlide: true
|
||||
});
|
||||
galleryTop.params.control = galleryThumbs;
|
||||
galleryThumbs.params.control = galleryTop;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #000;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.gallery-top {
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
.gallery-thumbs {
|
||||
height: 20%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.gallery-thumbs .swiper-slide {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.gallery-thumbs .swiper-slide-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container gallery-top">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
|
||||
</div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next swiper-button-white"></div>
|
||||
<div class="swiper-button-prev swiper-button-white"></div>
|
||||
</div>
|
||||
<div class="swiper-container gallery-thumbs">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var galleryTop = new Swiper('.gallery-top', {
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
spaceBetween: 10,
|
||||
});
|
||||
var galleryThumbs = new Swiper('.gallery-thumbs', {
|
||||
spaceBetween: 10,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 'auto',
|
||||
touchRatio: 0.2,
|
||||
slideToClickedSlide: true
|
||||
});
|
||||
galleryTop.params.control = galleryThumbs;
|
||||
galleryThumbs.params.control = galleryTop;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container swiper1">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination swiper-pagination1"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container swiper2">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination swiper-pagination2"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container swiper3">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination swiper-pagination3"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper1 = new Swiper('.swiper1', {
|
||||
pagination: '.swiper-pagination1',
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
});
|
||||
var swiper2 = new Swiper('.swiper2', {
|
||||
pagination: '.swiper-pagination2',
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
});
|
||||
var swiper3 = new Swiper('.swiper3', {
|
||||
pagination: '.swiper-pagination3',
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" data-hash="slide1">Slide 1</div>
|
||||
<div class="swiper-slide" data-hash="slide2">Slide 2</div>
|
||||
<div class="swiper-slide" data-hash="slide3">Slide 3</div>
|
||||
<div class="swiper-slide" data-hash="slide4">Slide 4</div>
|
||||
<div class="swiper-slide" data-hash="slide5">Slide 5</div>
|
||||
<div class="swiper-slide" data-hash="slide6">Slide 6</div>
|
||||
<div class="swiper-slide" data-hash="slide7">Slide 7</div>
|
||||
<div class="swiper-slide" data-hash="slide8">Slide 8</div>
|
||||
<div class="swiper-slide" data-hash="slide9">Slide 9</div>
|
||||
<div class="swiper-slide" data-hash="slide10">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
spaceBetween: 30,
|
||||
hashnav: true,
|
||||
hashnavWatchState: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
_static/assets/plugins/slider.swiper/demos/26-rtl.html
Normal file
85
_static/assets/plugins/slider.swiper/demos/26-rtl.html
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container" dir="rtl">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Navigation -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
87
_static/assets/plugins/slider.swiper/demos/27-jquery.html
Normal file
87
_static/assets/plugins/slider.swiper/demos/27-jquery.html
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Navigation -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.jquery.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
111
_static/assets/plugins/slider.swiper/demos/28-parallax.html
Normal file
111
_static/assets/plugins/slider.swiper/demos/28-parallax.html
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
}
|
||||
.swiper-slide {
|
||||
font-size: 18px;
|
||||
color:#fff;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 60px;
|
||||
}
|
||||
.parallax-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 130%;
|
||||
height: 100%;
|
||||
-webkit-background-size: cover;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.swiper-slide .title {
|
||||
font-size: 41px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.swiper-slide .subtitle {
|
||||
font-size: 21px;
|
||||
}
|
||||
.swiper-slide .text {
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="parallax-bg" style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)" data-swiper-parallax="-23%"></div>
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="title" data-swiper-parallax="-100">Slide 1</div>
|
||||
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
|
||||
<div class="text" data-swiper-parallax="-300">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="title" data-swiper-parallax="-100">Slide 2</div>
|
||||
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
|
||||
<div class="text" data-swiper-parallax="-300">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="title" data-swiper-parallax="-100">Slide 3</div>
|
||||
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
|
||||
<div class="text" data-swiper-parallax="-300">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination swiper-pagination-white"></div>
|
||||
<!-- Add Navigation -->
|
||||
<div class="swiper-button-prev swiper-button-white"></div>
|
||||
<div class="swiper-button-next swiper-button-white"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
parallax: true,
|
||||
speed: 600,
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.swiper-pagination-bullet {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
color:#000;
|
||||
opacity: 1;
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
.swiper-pagination-bullet-active {
|
||||
color:#fff;
|
||||
background: #007aff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
paginationBulletRender: function (swiper, index, className) {
|
||||
return '<span class="' + className + '">' + (index + 1) + '</span>';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #000;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #000;
|
||||
|
||||
}
|
||||
.swiper-slide img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<!-- Required swiper-lazy class and image source specified in data-src attribute -->
|
||||
<img data-src="http://lorempixel.com/1600/1200/nature/1" class="swiper-lazy">
|
||||
<!-- Preloader image -->
|
||||
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img data-src="http://lorempixel.com/1600/1200/nature/2" class="swiper-lazy">
|
||||
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img data-src="http://lorempixel.com/1600/1200/nature/3" class="swiper-lazy">
|
||||
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img data-src="http://lorempixel.com/1600/1200/nature/4" class="swiper-lazy">
|
||||
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img data-src="http://lorempixel.com/1600/1200/nature/5" class="swiper-lazy">
|
||||
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img data-src="http://lorempixel.com/1600/1200/nature/6" class="swiper-lazy">
|
||||
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination swiper-pagination-white"></div>
|
||||
<!-- Navigation -->
|
||||
<div class="swiper-button-next swiper-button-white"></div>
|
||||
<div class="swiper-button-prev swiper-button-white"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
// Disable preloading of all images
|
||||
preloadImages: false,
|
||||
// Enable lazy loading
|
||||
lazyLoading: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
133
_static/assets/plugins/slider.swiper/demos/31-custom-plugin.html
Normal file
133
_static/assets/plugins/slider.swiper/demos/31-custom-plugin.html
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Navigation -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Include plugin after Swiper -->
|
||||
<script>
|
||||
/* ========
|
||||
Debugger plugin, simple demo plugin to console.log some of callbacks
|
||||
======== */
|
||||
Swiper.prototype.plugins.debugger = function (swiper, params) {
|
||||
if (!params) return;
|
||||
// Need to return object with properties that names are the same as callbacks
|
||||
return {
|
||||
onInit: function (swiper){
|
||||
console.log('onInit');
|
||||
},
|
||||
onClick: function (swiper, e) {
|
||||
console.log('onClick');
|
||||
},
|
||||
onTap: function (swiper, e) {
|
||||
console.log('onTap');
|
||||
},
|
||||
onDoubleTap: function (swiper, e) {
|
||||
console.log('onDoubleTap');
|
||||
},
|
||||
onSliderMove: function (swiper, e) {
|
||||
console.log('onSliderMove');
|
||||
},
|
||||
onSlideChangeStart: function (swiper) {
|
||||
console.log('onSlideChangeStart');
|
||||
},
|
||||
onSlideChangeEnd: function (swiper) {
|
||||
console.log('onSlideChangeEnd');
|
||||
},
|
||||
onTransitionStart: function (swiper) {
|
||||
console.log('onTransitionStart');
|
||||
},
|
||||
onTransitionEnd: function (swiper) {
|
||||
console.log('onTransitionEnd');
|
||||
},
|
||||
onReachBeginning: function (swiper) {
|
||||
console.log('onReachBeginning');
|
||||
},
|
||||
onReachEnd: function (swiper) {
|
||||
console.log('onReachEnd');
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
// Enable debugger
|
||||
debugger: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #fff;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
font-size: 18px;
|
||||
height: auto;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<h4>Scroll Container</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolor lectus eu libero. Vestibulum venenatis eget turpis sed faucibus. Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam elit ante, luctus non ante sit amet, sodales vulputate odio. Aenean tristique nisl tellus, sit amet fringilla nisl volutpat cursus. Quisque dignissim lectus ac nunc consectetur mattis. Proin vel hendrerit ipsum, et lobortis dolor. Vestibulum convallis, nibh et tincidunt tristique, nisl risus facilisis lectus, ut interdum orci nisl ac nunc. Cras et aliquam felis. Quisque vel ipsum at elit sodales posuere eget non est. Fusce convallis vestibulum dolor non volutpat. Vivamus vestibulum quam ut ultricies pretium.</p>
|
||||
<p>Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna consectetur convallis non vel mi. Donec libero dolor, volutpat ut urna sit amet, aliquet molestie purus. Phasellus faucibus, leo vel scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis ante orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque iaculis bibendum mauris. Cras ut egestas orci. Cras odio risus, sagittis ut nunc vitae, aliquam consectetur purus. Vivamus ornare nunc vel tellus facilisis, quis dictum elit tincidunt. Donec accumsan nisi at laoreet sodales. Cras at ullamcorper massa. Maecenas at facilisis ex. Nam mollis dignissim purus id efficitur.</p>
|
||||
<p>Curabitur eget aliquam erat. Curabitur a neque vitae purus volutpat elementum. Vivamus quis vestibulum leo, efficitur ullamcorper velit. Integer tincidunt finibus metus vel porta. Mauris sed mauris congue, pretium est nec, malesuada purus. Nulla hendrerit consectetur arcu et lacinia. Suspendisse augue justo, convallis eget arcu in, pretium tempor ligula. Nullam vulputate tincidunt est ut ullamcorper.</p>
|
||||
<p>Curabitur sed sodales leo. Nulla facilisi. Etiam condimentum, nisi id tempor vulputate, nisi justo cursus justo, pellentesque condimentum diam arcu sit amet leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In placerat tellus a posuere vehicula. Donec diam massa, efficitur vitae mattis et, pretium in augue. Fusce iaculis mi quis ante venenatis, sit amet pellentesque orci aliquam. Vestibulum elementum posuere vehicula.</p>
|
||||
<p>Sed tincidunt diam a massa pharetra faucibus. Praesent condimentum id arcu nec fringilla. Maecenas faucibus, ante et venenatis interdum, erat mi eleifend dui, at convallis nisl est nec arcu. Duis vitae arcu rhoncus, faucibus magna ut, tempus metus. Cras in nibh sed ipsum consequat rhoncus. Proin fringilla nulla ut augue tempor fermentum. Nunc hendrerit non nisi vitae finibus. Donec eget ornare libero. Aliquam auctor erat enim, a semper risus semper at. In ut dui in metus tincidunt euismod eget et lacus. Aenean et dictum urna, sed rhoncus lorem. Duis pharetra sagittis odio. Etiam a libero ut nisi feugiat tincidunt vel vitae turpis. Maecenas vel orci sit amet lorem hendrerit venenatis sollicitudin ut dui. Quisque rhoncus nibh in massa pretium scelerisque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolor lectus eu libero. Vestibulum venenatis eget turpis sed faucibus. Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam elit ante, luctus non ante sit amet, sodales vulputate odio. Aenean tristique nisl tellus, sit amet fringilla nisl volutpat cursus. Quisque dignissim lectus ac nunc consectetur mattis. Proin vel hendrerit ipsum, et lobortis dolor. Vestibulum convallis, nibh et tincidunt tristique, nisl risus facilisis lectus, ut interdum orci nisl ac nunc. Cras et aliquam felis. Quisque vel ipsum at elit sodales posuere eget non est. Fusce convallis vestibulum dolor non volutpat. Vivamus vestibulum quam ut ultricies pretium.</p>
|
||||
<p>Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna consectetur convallis non vel mi. Donec libero dolor, volutpat ut urna sit amet, aliquet molestie purus. Phasellus faucibus, leo vel scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis ante orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque iaculis bibendum mauris. Cras ut egestas orci. Cras odio risus, sagittis ut nunc vitae, aliquam consectetur purus. Vivamus ornare nunc vel tellus facilisis, quis dictum elit tincidunt. Donec accumsan nisi at laoreet sodales. Cras at ullamcorper massa. Maecenas at facilisis ex. Nam mollis dignissim purus id efficitur.</p>
|
||||
<p>Curabitur eget aliquam erat. Curabitur a neque vitae purus volutpat elementum. Vivamus quis vestibulum leo, efficitur ullamcorper velit. Integer tincidunt finibus metus vel porta. Mauris sed mauris congue, pretium est nec, malesuada purus. Nulla hendrerit consectetur arcu et lacinia. Suspendisse augue justo, convallis eget arcu in, pretium tempor ligula. Nullam vulputate tincidunt est ut ullamcorper.</p>
|
||||
<p>Curabitur sed sodales leo. Nulla facilisi. Etiam condimentum, nisi id tempor vulputate, nisi justo cursus justo, pellentesque condimentum diam arcu sit amet leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In placerat tellus a posuere vehicula. Donec diam massa, efficitur vitae mattis et, pretium in augue. Fusce iaculis mi quis ante venenatis, sit amet pellentesque orci aliquam. Vestibulum elementum posuere vehicula.</p>
|
||||
<p>Sed tincidunt diam a massa pharetra faucibus. Praesent condimentum id arcu nec fringilla. Maecenas faucibus, ante et venenatis interdum, erat mi eleifend dui, at convallis nisl est nec arcu. Duis vitae arcu rhoncus, faucibus magna ut, tempus metus. Cras in nibh sed ipsum consequat rhoncus. Proin fringilla nulla ut augue tempor fermentum. Nunc hendrerit non nisi vitae finibus. Donec eget ornare libero. Aliquam auctor erat enim, a semper risus semper at. In ut dui in metus tincidunt euismod eget et lacus. Aenean et dictum urna, sed rhoncus lorem. Duis pharetra sagittis odio. Etiam a libero ut nisi feugiat tincidunt vel vitae turpis. Maecenas vel orci sit amet lorem hendrerit venenatis sollicitudin ut dui. Quisque rhoncus nibh in massa pretium scelerisque.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add Scroll Bar -->
|
||||
<div class="swiper-scrollbar"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
scrollbar: '.swiper-scrollbar',
|
||||
direction: 'vertical',
|
||||
slidesPerView: 'auto',
|
||||
mousewheelControl: true,
|
||||
freeMode: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.menu {
|
||||
min-width: 100px;
|
||||
width: 70%;
|
||||
max-width: 320px;
|
||||
|
||||
background-color: #2C8DFB;
|
||||
color: #fff;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
position: absolute;
|
||||
top: 0px; left: 0px;
|
||||
|
||||
padding: 15px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s;
|
||||
|
||||
background-color: #2C8DFB;
|
||||
|
||||
/*margin: 14px;
|
||||
border-radius: 5px;*/
|
||||
}
|
||||
.menu-button .bar:nth-of-type(1) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.menu-button .bar:nth-of-type(3) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: 50px;
|
||||
height: 5px;
|
||||
|
||||
margin: 10px auto;
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 10px;
|
||||
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.menu-button:hover .bar:nth-of-type(1) {
|
||||
-webkit-transform: translateY(1.5px) rotate(-4.5deg);
|
||||
-ms-transform: translateY(1.5px) rotate(-4.5deg);
|
||||
transform: translateY(1.5px) rotate(-4.5deg);
|
||||
}
|
||||
.menu-button:hover .bar:nth-of-type(2) {
|
||||
opacity: .9;
|
||||
}
|
||||
.menu-button:hover .bar:nth-of-type(3) {
|
||||
-webkit-transform: translateY(-1.5px) rotate(4.5deg);
|
||||
-ms-transform: translateY(-1.5px) rotate(4.5deg);
|
||||
transform: translateY(-1.5px) rotate(4.5deg);
|
||||
}
|
||||
|
||||
.cross .bar:nth-of-type(1) {
|
||||
-webkit-transform: translateY(15px) rotate(-45deg);
|
||||
-ms-transform: translateY(15px) rotate(-45deg);
|
||||
transform: translateY(15px) rotate(-45deg);
|
||||
}
|
||||
.cross .bar:nth-of-type(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.cross .bar:nth-of-type(3) {
|
||||
-webkit-transform: translateY(-15px) rotate(45deg);
|
||||
-ms-transform: translateY(-15px) rotate(45deg);
|
||||
transform: translateY(-15px) rotate(45deg);
|
||||
}
|
||||
.cross:hover .bar:nth-of-type(1) {
|
||||
-webkit-transform: translateY(13.5px) rotate(-40.5deg);
|
||||
-ms-transform: translateY(13.5px) rotate(-40.5deg);
|
||||
transform: translateY(13.5px) rotate(-40.5deg);
|
||||
}
|
||||
.cross:hover .bar:nth-of-type(2) {
|
||||
opacity: .1;
|
||||
}
|
||||
.cross:hover .bar:nth-of-type(3) {
|
||||
-webkit-transform: translateY(-13.5px) rotate(40.5deg);
|
||||
-ms-transform: translateY(-13.5px) rotate(40.5deg);
|
||||
transform: translateY(-13.5px) rotate(40.5deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide menu">Menu slide</div>
|
||||
<div class="swiper-slide content">
|
||||
<div class="menu-button">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
Content slide
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var toggleMenu = function(){
|
||||
if (swiper.previousIndex == 0)
|
||||
swiper.slidePrev()
|
||||
}
|
||||
, menuButton = document.getElementsByClassName('menu-button')[0]
|
||||
, swiper = new Swiper('.swiper-container', {
|
||||
slidesPerView: 'auto'
|
||||
, initialSlide: 1
|
||||
, resistanceRatio: .00000000000001
|
||||
, onSlideChangeStart: function(slider) {
|
||||
if (slider.activeIndex == 0) {
|
||||
menuButton.classList.add('cross')
|
||||
menuButton.removeEventListener('click', toggleMenu, false)
|
||||
} else
|
||||
menuButton.classList.remove('cross')
|
||||
}
|
||||
, onSlideChangeEnd: function(slider) {
|
||||
if (slider.activeIndex == 0)
|
||||
menuButton.removeEventListener('click', toggleMenu, false)
|
||||
else
|
||||
menuButton.addEventListener('click', toggleMenu, false)
|
||||
}
|
||||
, slideToClickedSlide: true
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 50,
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 40
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20
|
||||
},
|
||||
320: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
}
|
||||
.swiper-container .swiper-slide {
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
}
|
||||
.swiper-container .swiper-slide:nth-child(2n) {
|
||||
height: 500px;
|
||||
line-height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
autoHeight: true, //enable auto height
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #fff;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
padding: 50px;
|
||||
}
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
|
||||
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></div>
|
||||
</div>
|
||||
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
pagination: '.swiper-pagination',
|
||||
effect: 'flip',
|
||||
grabCursor: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
line-height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
pagination: '.swiper-pagination',
|
||||
paginationType: 'fraction'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
line-height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
pagination: '.swiper-pagination',
|
||||
paginationType: 'progress'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
63
_static/assets/plugins/slider.swiper/demos/38-history.html
Normal file
63
_static/assets/plugins/slider.swiper/demos/38-history.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Swiper Playground</title>
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
</head>
|
||||
<body>
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-scrollbar"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" data-history="1">Slide 1</div>
|
||||
<div class="swiper-slide" data-history="Slide 2">Slide 2</div>
|
||||
<div class="swiper-slide" data-history="3">Slide 3</div>
|
||||
<div class="swiper-slide" data-history="Slide 4">Slide 4</div>
|
||||
<div class="swiper-slide" data-history="5">Slide 5</div>
|
||||
<div class="swiper-slide" data-history="Slide 6">Slide 6</div>
|
||||
<div class="swiper-slide" data-history="7">Slide 7</div>
|
||||
<div class="swiper-slide" data-history="Slide 8">Slide 8</div>
|
||||
<div class="swiper-slide" data-history="9">Slide 9</div>
|
||||
<div class="swiper-slide" data-history="Slide 10">Slide 10</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
<style>
|
||||
body, html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
background: #f1f1f1;
|
||||
color:#000;
|
||||
text-align: center;
|
||||
line-height: 300px;
|
||||
}
|
||||
</style>
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
spaceBetween: 50,
|
||||
slidesPerView: 2,
|
||||
centeredSlides: true,
|
||||
slideToClickedSlide: true,
|
||||
grabCursor: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
scrollbar: '.swiper-scrollbar',
|
||||
pagination: '.swiper-pagination',
|
||||
history: 'slide',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
<div class="swiper-slide">Slide 4</div>
|
||||
<div class="swiper-slide">Slide 5</div>
|
||||
<div class="swiper-slide">Slide 6</div>
|
||||
<div class="swiper-slide">Slide 7</div>
|
||||
<div class="swiper-slide">Slide 8</div>
|
||||
<div class="swiper-slide">Slide 9</div>
|
||||
<div class="swiper-slide">Slide 10</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- Add Navigation -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.jquery.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
loop: true,
|
||||
pagination: '.swiper-pagination',
|
||||
paginationClickable: true,
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
74
_static/assets/plugins/slider.swiper/demos/39-zoom.html
Normal file
74
_static/assets/plugins/slider.swiper/demos/39-zoom.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Swiper demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="../dist/css/swiper.min.css">
|
||||
|
||||
<!-- Demo styles -->
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #000;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color:#000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-zoom-container">
|
||||
<img src="http://lorempixel.com/800/800/sports/1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-zoom-container">
|
||||
<img src="http://lorempixel.com/800/400/sports/2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-zoom-container">
|
||||
<img src="http://lorempixel.com/400/800/sports/3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add Pagination -->
|
||||
<div class="swiper-pagination swiper-pagination-white"></div>
|
||||
<!-- Add Navigation -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="../dist/js/swiper.min.js"></script>
|
||||
|
||||
<!-- Initialize Swiper -->
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
zoom: true,
|
||||
pagination: '.swiper-pagination',
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
575
_static/assets/plugins/slider.swiper/dist/css/swiper.css
vendored
Normal file
575
_static/assets/plugins/slider.swiper/dist/css/swiper.css
vendored
Normal file
|
|
@ -0,0 +1,575 @@
|
|||
/**
|
||||
* Swiper 3.4.2
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
*
|
||||
* http://www.idangero.us/swiper/
|
||||
*
|
||||
* Copyright 2017, Vladimir Kharlampidi
|
||||
* The iDangero.us
|
||||
* http://www.idangero.us/
|
||||
*
|
||||
* Licensed under MIT
|
||||
*
|
||||
* Released on: March 10, 2017
|
||||
*/
|
||||
.swiper-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Fix of Webkit flickering */
|
||||
z-index: 1;
|
||||
}
|
||||
.swiper-container-no-flexbox .swiper-slide {
|
||||
float: left;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-wrapper {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-moz-transition-property: -moz-transform;
|
||||
-o-transition-property: -o-transform;
|
||||
-ms-transition-property: -ms-transform;
|
||||
transition-property: transform;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.swiper-container-android .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
-webkit-transform: translate3d(0px, 0, 0);
|
||||
-moz-transform: translate3d(0px, 0, 0);
|
||||
-o-transform: translate(0px, 0px);
|
||||
-ms-transform: translate3d(0px, 0, 0);
|
||||
transform: translate3d(0px, 0, 0);
|
||||
}
|
||||
.swiper-container-multirow > .swiper-wrapper {
|
||||
-webkit-box-lines: multiple;
|
||||
-moz-box-lines: multiple;
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.swiper-container-free-mode > .swiper-wrapper {
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
-ms-transition-timing-function: ease-out;
|
||||
-o-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
/* Auto Height */
|
||||
.swiper-container-autoheight,
|
||||
.swiper-container-autoheight .swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
.swiper-container-autoheight .swiper-wrapper {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-transition-property: -webkit-transform, height;
|
||||
-moz-transition-property: -moz-transform;
|
||||
-o-transition-property: -o-transform;
|
||||
-ms-transition-property: -ms-transform;
|
||||
transition-property: transform, height;
|
||||
}
|
||||
/* a11y */
|
||||
.swiper-container .swiper-notification {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
/* IE10 Windows Phone 8 Fixes */
|
||||
.swiper-wp8-horizontal {
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.swiper-wp8-vertical {
|
||||
-ms-touch-action: pan-x;
|
||||
touch-action: pan-x;
|
||||
}
|
||||
/* Arrows */
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 27px;
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
-moz-background-size: 27px 44px;
|
||||
-webkit-background-size: 27px 44px;
|
||||
background-size: 27px 44px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.swiper-button-prev.swiper-button-disabled,
|
||||
.swiper-button-next.swiper-button-disabled {
|
||||
opacity: 0.35;
|
||||
cursor: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-button-prev,
|
||||
.swiper-container-rtl .swiper-button-next {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
||||
left: 10px;
|
||||
right: auto;
|
||||
}
|
||||
.swiper-button-prev.swiper-button-black,
|
||||
.swiper-container-rtl .swiper-button-next.swiper-button-black {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-prev.swiper-button-white,
|
||||
.swiper-container-rtl .swiper-button-next.swiper-button-white {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-next,
|
||||
.swiper-container-rtl .swiper-button-prev {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
.swiper-button-next.swiper-button-black,
|
||||
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-next.swiper-button-white,
|
||||
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
/* Pagination Styles */
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
-webkit-transition: 300ms;
|
||||
-moz-transition: 300ms;
|
||||
-o-transition: 300ms;
|
||||
transition: 300ms;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 10;
|
||||
}
|
||||
.swiper-pagination.swiper-pagination-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
/* Common Styles */
|
||||
.swiper-pagination-fraction,
|
||||
.swiper-pagination-custom,
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/* Bullets */
|
||||
.swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
}
|
||||
button.swiper-pagination-bullet {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
cursor: pointer;
|
||||
}
|
||||
.swiper-pagination-white .swiper-pagination-bullet {
|
||||
background: #fff;
|
||||
}
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: #007aff;
|
||||
}
|
||||
.swiper-pagination-white .swiper-pagination-bullet-active {
|
||||
background: #fff;
|
||||
}
|
||||
.swiper-pagination-black .swiper-pagination-bullet-active {
|
||||
background: #000;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-bullets {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
-webkit-transform: translate3d(0px, -50%, 0);
|
||||
-moz-transform: translate3d(0px, -50%, 0);
|
||||
-o-transform: translate(0px, -50%);
|
||||
-ms-transform: translate3d(0px, -50%, 0);
|
||||
transform: translate3d(0px, -50%, 0);
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 5px;
|
||||
}
|
||||
/* Progress */
|
||||
.swiper-pagination-progress {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
}
|
||||
.swiper-pagination-progress .swiper-pagination-progressbar {
|
||||
background: #007aff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-transform-origin: left top;
|
||||
-moz-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
-o-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
}
|
||||
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
|
||||
-webkit-transform-origin: right top;
|
||||
-moz-transform-origin: right top;
|
||||
-ms-transform-origin: right top;
|
||||
-o-transform-origin: right top;
|
||||
transform-origin: right top;
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-pagination-progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-progress {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.swiper-pagination-progress.swiper-pagination-white {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
|
||||
background: #fff;
|
||||
}
|
||||
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
|
||||
background: #000;
|
||||
}
|
||||
/* 3D Container */
|
||||
.swiper-container-3d {
|
||||
-webkit-perspective: 1200px;
|
||||
-moz-perspective: 1200px;
|
||||
-o-perspective: 1200px;
|
||||
perspective: 1200px;
|
||||
}
|
||||
.swiper-container-3d .swiper-wrapper,
|
||||
.swiper-container-3d .swiper-slide,
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top,
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-container-3d .swiper-cube-shadow {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-ms-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top,
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-left {
|
||||
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-right {
|
||||
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-top {
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
/* Coverflow */
|
||||
.swiper-container-coverflow .swiper-wrapper,
|
||||
.swiper-container-flip .swiper-wrapper {
|
||||
/* Windows 8 IE 10 fix */
|
||||
-ms-perspective: 1200px;
|
||||
}
|
||||
/* Cube + Flip */
|
||||
.swiper-container-cube,
|
||||
.swiper-container-flip {
|
||||
overflow: visible;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide,
|
||||
.swiper-container-flip .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide .swiper-slide,
|
||||
.swiper-container-flip .swiper-slide .swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-flip .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
|
||||
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide-shadow-top,
|
||||
.swiper-container-flip .swiper-slide-shadow-top,
|
||||
.swiper-container-cube .swiper-slide-shadow-bottom,
|
||||
.swiper-container-flip .swiper-slide-shadow-bottom,
|
||||
.swiper-container-cube .swiper-slide-shadow-left,
|
||||
.swiper-container-flip .swiper-slide-shadow-left,
|
||||
.swiper-container-cube .swiper-slide-shadow-right,
|
||||
.swiper-container-flip .swiper-slide-shadow-right {
|
||||
z-index: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
/* Cube */
|
||||
.swiper-container-cube .swiper-slide {
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: 0 0;
|
||||
-moz-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-container-cube.swiper-container-rtl .swiper-slide {
|
||||
-webkit-transform-origin: 100% 0;
|
||||
-moz-transform-origin: 100% 0;
|
||||
-ms-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-next,
|
||||
.swiper-container-cube .swiper-slide-prev,
|
||||
.swiper-container-cube .swiper-slide-next + .swiper-slide {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
.swiper-container-cube .swiper-cube-shadow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.6;
|
||||
-webkit-filter: blur(50px);
|
||||
filter: blur(50px);
|
||||
z-index: 0;
|
||||
}
|
||||
/* Fade */
|
||||
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
-ms-transition-timing-function: ease-out;
|
||||
-o-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.swiper-container-fade .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-transition-property: opacity;
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
}
|
||||
.swiper-container-fade .swiper-slide .swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-container-fade .swiper-slide-active,
|
||||
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.swiper-zoom-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.swiper-zoom-container > img,
|
||||
.swiper-zoom-container > svg,
|
||||
.swiper-zoom-container > canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
/* Scrollbar */
|
||||
.swiper-scrollbar {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
-ms-touch-action: none;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-scrollbar {
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
bottom: 3px;
|
||||
z-index: 50;
|
||||
height: 5px;
|
||||
width: 98%;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-scrollbar {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 1%;
|
||||
z-index: 50;
|
||||
width: 5px;
|
||||
height: 98%;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.swiper-scrollbar-cursor-drag {
|
||||
cursor: move;
|
||||
}
|
||||
/* Preloader */
|
||||
.swiper-lazy-preloader {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -21px;
|
||||
margin-top: -21px;
|
||||
z-index: 10;
|
||||
-webkit-transform-origin: 50%;
|
||||
-moz-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
}
|
||||
.swiper-lazy-preloader:after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
background-position: 50%;
|
||||
-webkit-background-size: 100%;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.swiper-lazy-preloader-white:after {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
@-webkit-keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
15
_static/assets/plugins/slider.swiper/dist/css/swiper.min.css
vendored
Normal file
15
_static/assets/plugins/slider.swiper/dist/css/swiper.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
_static/assets/plugins/slider.swiper/dist/js/maps/swiper.jquery.min.js.map
vendored
Normal file
1
_static/assets/plugins/slider.swiper/dist/js/maps/swiper.jquery.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
_static/assets/plugins/slider.swiper/dist/js/maps/swiper.jquery.umd.min.js.map
vendored
Normal file
1
_static/assets/plugins/slider.swiper/dist/js/maps/swiper.jquery.umd.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
_static/assets/plugins/slider.swiper/dist/js/maps/swiper.min.js.map
vendored
Normal file
1
_static/assets/plugins/slider.swiper/dist/js/maps/swiper.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
4688
_static/assets/plugins/slider.swiper/dist/js/swiper.jquery.js
vendored
Normal file
4688
_static/assets/plugins/slider.swiper/dist/js/swiper.jquery.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
18
_static/assets/plugins/slider.swiper/dist/js/swiper.jquery.min.js
vendored
Normal file
18
_static/assets/plugins/slider.swiper/dist/js/swiper.jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4677
_static/assets/plugins/slider.swiper/dist/js/swiper.jquery.umd.js
vendored
Normal file
4677
_static/assets/plugins/slider.swiper/dist/js/swiper.jquery.umd.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
18
_static/assets/plugins/slider.swiper/dist/js/swiper.jquery.umd.min.js
vendored
Normal file
18
_static/assets/plugins/slider.swiper/dist/js/swiper.jquery.umd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5354
_static/assets/plugins/slider.swiper/dist/js/swiper.js
vendored
Normal file
5354
_static/assets/plugins/slider.swiper/dist/js/swiper.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
19
_static/assets/plugins/slider.swiper/dist/js/swiper.min.js
vendored
Normal file
19
_static/assets/plugins/slider.swiper/dist/js/swiper.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
_static/assets/plugins/slider.swiper/update.txt
Normal file
3
_static/assets/plugins/slider.swiper/update.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
V3.0.6
|
||||
|
||||
http://www.idangero.us/swiper/#.VSo5VfmUcps
|
||||
Loading…
Add table
Add a link
Reference in a new issue