pinch-slider
Version:
a slider for images which can be zoomed or pinched
49 lines (43 loc) • 1.49 kB
HTML
<html>
<head>
<title>demo</title>
<link rel="stylesheet" href="../dist/pinch-slider.css">
<style type="text/css">
.slider-container {
width: 100%;
height: 500px;
overflow: hidden;
}
.full-screen {
background: black;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.full-mode .ps-img-wrapper img {
-o-object-fit: contain;
object-fit: contain;
height: auto;
}
</style>
</head>
<body>
<div class="vue-wrapper">
<div class="slider-container" style="">
<pinch-slider :slides="imgs" :enable-pinch="false" :current-index='currentIndex' :lazy-load='true' @on-slide-change="changePageNo" @on-img-click="showFull">
</pinch-slider>
</div>
<div class="full-screen" v-show='isFull' @click='isFull=false'>
<pinch-slider :slides="imgs" class="full-mode" :current-index="currentIndex" :lazy-load='true' @on-slide-change="changePageNo">
</pinch-slider>
</div>
</div>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js'></script>
<!-- <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js'></script> -->
<script type="text/javascript" src='../dist/pinchSlider.min.js'></script>
<script type="text/javascript" src='./demo.js'></script>
</body>
</html>