swiper
Version:
Mobile touch slider and framework with hardware accelerated transitions
86 lines • 2.72 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="../dist/idangerous.swiper.css">
<link rel="stylesheet" href="css/idangerous.swiper.scrollbar.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: 300px;
text-align: center;
}
.swiper-slide {
width: 1520px;
padding: 20px;
background: #fff;
}
.red-slide {
background: #ca4040;
}
.blue-slide {
background: #4390ee;
}
.orange-slide {
background: #ff8604;
}
.green-slide {
background: #49a430;
}
.pink-slide {
background: #973e76;
}
.swiper-scrollbar {
width: 100%;
height: 4px;
position: absolute;
left: 0;
bottom: 5px;
z-index: 1;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-scrollbar"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center">
<p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p>
</div>
<div style="width:300px; float:left; margin-left:20px">
<p>Here goes some text</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p>
<p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p>
</div>
<div style="width:500px; float:left; margin-left:20px">
<p>Here goes wide image</p>
<p><img src="img/bb.jpg"></p>
</div>
<div class="blue-slide" style="width:350px; float:left; font-size:28px; line-height:30px; text-align:center; margin-left:20px; padding:25px">
<p style="color:#fff; font-weight:bold; font-style:italic;">You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="../dist/idangerous.swiper.min.js"></script>
<script src="js/idangerous.swiper.scrollbar-2.1.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
scrollContainer: true,
scrollbar: {
container: '.swiper-scrollbar'
}
})
</script>
</body>
</html>