swiper
Version:
Mobile touch slider and framework with hardware accelerated transitions
158 lines (157 loc) • 3.82 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="../dist/idangerous.swiper.css">
<style>
/* Demo Styles */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
}
.swiper-container {
width: 640px;
height: 250px;
color: #fff;
text-align: center;
}
.red-slide {
background: #ca4040;
}
.blue-slide {
background: #4390ee;
}
.orange-slide {
background: #ff8604;
}
.green-slide {
background: #49a430;
}
.pink-slide {
background: #973e76;
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px;
}
.swiper-slide p {
font-style: italic;
font-size: 25px;
}
.pagination {
position: absolute;
z-index: 20;
left: 10px;
bottom: 10px;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #fff;
}
.swiper-dynamic-links {
text-align: center;
}
.swiper-dynamic-links a {
display: inline-block;
padding: 5px;
border-radius: 3px;
border: 1px solid #ccc;
margin: 5px;
font-size: 12px;
text-decoration: none;
color: #333;
background: #eee;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
<div class="title">Slide 1</div>
</div>
<div class="swiper-slide red-slide">
<div class="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 3</div>
</div>
<div class="swiper-slide green-slide">
<div class="title">Slide 4</div>
</div>
</div>
<div class="pagination"></div>
</div>
<p class="swiper-dynamic-links">
<a class="sdl-append" href="#">Append slide</a>
<a class="sdl-prepend" href="#">Prepend slide</a>
<a class="sdl-swap" href="#">Swap 1st and 2nd slides</a>
<a class="sdl-insert" href="#">Insert after first slide</a>
<a class="sdl-remove1" href="#">Remove first slide</a>
<a class="sdl-removel" href="#">Remove last slide</a>
<a class="sdl-remove2" href="#">Remove 2nd slide</a>
</p>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="../dist/idangerous.swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true
})
/* Dynamic Swiper Links*/
function randomColor () {
var colors = ('blue red green orange pink').split(' ');
return colors[ Math.floor( Math.random()*colors.length ) ]
}
var count = 4;
$('.sdl-append').click(function(e) {
e.preventDefault();
mySwiper.appendSlide('<div class="title">Slide '+(++count)+'</div>', 'swiper-slide '+randomColor()+'-slide')
});
$('.sdl-prepend').click(function(e) {
e.preventDefault();
mySwiper.prependSlide('<div class="title">Slide '+(++count)+'</div>', 'swiper-slide '+randomColor()+'-slide')
});
$('.sdl-swap').click(function(e) {
e.preventDefault();
mySwiper
.getFirstSlide()
.insertAfter(1)
});
$('.sdl-insert').click(function(e) {
e.preventDefault();
mySwiper
.createSlide('<div class="title">Slide '+(++count)+'</div>', 'swiper-slide '+randomColor()+'-slide')
.insertAfter(0)
});
$('.sdl-remove1').click(function(e) {
e.preventDefault();
mySwiper.removeSlide(0)
});
$('.sdl-removel').click(function(e) {
e.preventDefault();
mySwiper.removeLastSlide()
});
$('.sdl-remove2').click(function(e) {
e.preventDefault();
mySwiper.removeSlide(1)
});
</script>
</body>
</html>