vue-swipeable-box-slider
Version:
Vuejs swipeable box slider plugin
244 lines (217 loc) • 9.27 kB
HTML
<html lang="en">
<head>
<title>Connectnigeria</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,600,700" rel="stylesheet">
<style>
body{
background: #ededed;
}
* {
margin: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
.sliderbox-container {
--n: 1;
display: flex;
align-items: center;
overflow-y: hidden;
width: 100%;
width: calc(var(--n)*100%);
max-height: 100vh;
transform: translate(calc(var(--tx, 0px) + var(--i, 0)/var(--n)*-80%));
transition: transform .3s ease-out;
}
.sliderbox-container .sliderbox-item {
width: 80%;
width: calc(80%/var(--n));
user-select: none;
pointer-events: none;
position:relative;
padding: 15px;
border-radius: 12px;
opacity: .5;
transition: transform .2s ease-out;
transform: scale(1);
}
.sliderbox-container .sliderbox-item.active{
opacity:1;
transform: scale(1.1);
z-index: 100;
}
.sliderbox-container .sliderbox-item .sliderbox-item-wrapper{
background: #FFF;
border-radius: 12px;
box-shadow:0 10px 40px -6px rgba(0,0,0,.1);
}
.sliderbox-container .sliderbox-item img{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display:block;
border-radius: 12px;
margin-bottom: 8px;
}
.sliderbox-container .sliderbox-item .sliderbox-content{
padding: 16px;
}
</style>
</head>
<body>
<div class="sliderbox-container" id="sliderbox-container">
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
</div>
<div class="sliderbox-container" id="sliderbox-container2">
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="sliderbox-item">
<div class="sliderbox-item-wrapper">
<img src="https://images.unsplash.com/photo-1510325805092-2951ab330b7d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=017cf46443f4821a375c20e8c68e37f0" alt="Tiny bird with pale brown, orange and white feathers in an evergreen tree." class="sliderbox-img`"/>
<div class="sliderbox-content">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
</div>
<script>
new sliderbox('#sliderbox-container');
new sliderbox('#sliderbox-container2');
function sliderbox($el){
let _C = document.querySelector($el),
N = _C.children.length,
i = 0,
x0 = null,
locked = false,
w,
parent = this;;
this.init = function(){
_C.querySelector('.sliderbox-item').classList.add('active');
_C.style.height = parseInt(_C.querySelector('.sliderbox-item').getBoundingClientRect().height)+150+'px';
this.size();
_C.style.setProperty('--n', N);
addEventListener('resize', this.size(), false);
_C.addEventListener('mousedown', this.lock, false);
_C.addEventListener('touchstart', this.lock, false);
_C.addEventListener('mousemove', this.drag, false);
_C.addEventListener('touchmove', this.drag, false);
_C.addEventListener('mouseup', this.move, false);
_C.addEventListener('touchend', this.move, false);
}
this.unify = function(e) { return e.changedTouches ? e.changedTouches[0] : e };
this.lock = function(e){
x0 = parent.unify(e).clientX;
_C.classList.toggle('smooth', !(locked = true))
};
this.drag = function(e) {
e.preventDefault();
if(locked){
_C.style.setProperty('--tx', `${Math.round(parent.unify(e).clientX - x0)}px`)
}
};
this.move = function(e) {
if(locked) {
let dx = parent.unify(e).clientX - x0, s = Math.sign(dx),
f = +(s*dx/w).toFixed(2);
if((i > 0 || s < 0) && (i < N - 1 || s > 0) && f > .2) {
_C.style.setProperty('--i', i -= s);
f = 1 - f
}
_C.style.setProperty('--tx', '0px');
_C.style.setProperty('--f', f);
_C.classList.toggle('smooth', !(locked = false));
x0 = null
if( _C.querySelector('.sliderbox-item.active') ){
_C.querySelector('.sliderbox-item.active').classList.remove('active');
}
setTimeout(function(){
_C.querySelectorAll('.sliderbox-item').forEach(function(el,i){
if( el.getBoundingClientRect().left == 0 ){
el.classList.add('active');
}
});
},600);
}
};
this.size = function() { w = window.innerWidth };
return this.init();
}
</script>
</body>
</html>