Responsive Product Slider Just Using HTML, CSS And JavaScript
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Product Slider</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body>
<div class="hero">
<div class="container">
<div class="slide">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'>
</script><script src="main.js"></script>
</body>
</html>
html,
body,
.hero,
.slide,
.img {
width: 100%;
height: 100%;
transform-style: preserve-3d;
user-select: none;
}
html,
body,
.hero {
overflow: hidden;
background: rgb(202, 52, 52);
}
div,
svg {
position: absolute;
}
.container {
perspective: 2000px;
width: 300px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
let xPos = 0;
gsap.timeline()
.set('.slide', { rotationY:180, cursor:'grab' })
.set('.img', {
rotateY: (i)=> i*-36,
transformOrigin: '50% 50% 500px',
z: -500,
backgroundImage:(i)=>'url(model2.jpg)',
backgroundPosition:(i)=>getBgPos(i),
backfaceVisibility:'hidden'
})
.from('.img', {
duration:1.5,
y:485,
opacity:0,
stagger:0.1,
ease:'expo'
})
.add(()=>{
$('.img').on('mouseenter', (e)=>{
let current = e.currentTarget;
gsap.to('.img', {opacity:(i,t)=>(t==current)? 1:0.5, ease:'power3'})
})
$('.img').on('mouseleave', (e)=>{
gsap.to('.img', {opacity:1, ease:'power2.inOut'})
})
}, '-=0.5')
$(window).on('mousedown touchstart', dragStart);
$(window).on('mouseup touchend', dragEnd);
function dragStart(e){
if (e.touches) e.clientX = e.touches[0].clientX;
xPos = Math.round(e.clientX);
gsap.set('.slide', {cursor:'grabbing'})
$(window).on('mousemove touchmove', drag);
}
function drag(e){
if (e.touches) e.clientX = e.touches[0].clientX;
gsap.to('.slide', {
rotationY: '-=' +( (Math.round(e.clientX)-xPos)%180 ),
onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) }
});
xPos = Math.round(e.clientX);
}
function dragEnd(e){
$(window).off('mousemove touchmove', drag);
gsap.set('.slide', {cursor:'grab'});
}
function getBgPos(i){
return ( 100-gsap.utils.wrap(0,360,gsap.getProperty('.slide', 'rotationY')-180-i*36)/360*480)+'px 0px';
}
Comments