vm-swipe
Version:
jQuery plugin for swipe HTML blocks
104 lines (95 loc) • 3 kB
HTML
<html lang="en">
<head>
<!-- head -->
<meta charset="utf-8">
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.">
<meta name="author" content="David Deutsch">
<title>
Home | Owl Carousel | 2.3.1
</title>
<!-- Stylesheets -->
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/css/docs.theme.min.css">
<!-- Owl Stylesheets -->
<link rel="stylesheet" href="assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="assets/owlcarousel/assets/owl.theme.default.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- Yeah i know js should not be in header. Its required for demos.-->
<!-- javascript -->
<script src="assets/vendors/jquery.min.js"></script>
<script src="assets/owlcarousel/owl.carousel.js"></script>
</head>
<body>
<!-- body -->
<div class="home-demo">
<div class="row">
<div class="large-12 columns">
<h3>Demo</h3>
<div class="owl-carousel">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
</div>
</div>
</div>
<script>
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
})
</script>
<!-- vendors -->
<script src="assets/vendors/highlight.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>