JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<div class="container">
<div class="pcont">
<p class="nmenu">Физические лица</p>
<p class="nmenu">Юридические лица</p>
<p class="nmenu">Управление проверками</p>
</div>
<div class="clear"></div>
<div class="main">
<div class="cell"><div class="slide"><a href="#12">123</a></div></div>
<div class="cell"><div class="slide">2</div></div>
<div class="cell"><div class="slide">3</div></div>
</div>
</div>
CSS
body {margin: 0;}
.clear {
clear: both;
}
.container {
width: 500px;
height: 800px;
background:#333;
overflow: hidden;
}
.touch {
width: 100%;height:100%;
}
.block {
width: 50px;
height: 50px;
background: red;
}
.main {
height: 300px;
background: darkslategrey;
position: relative;
}
.cell {
width: 100%; /* full width */
height: 160px; /* height of carousel */
margin-right: 30px;
display: grid;
justify-content: space-around;
align-content: center;
position: absolute;
background: darkseagreen;
}
.nmenu {
font: 30px Arial;
color: #fff;
margin-left: 40px;
user-select: none;
float: left;
}
a {
user-select: none;
user-drag: none;
}
.pcont {
width: 1200px;
position: relative;
}
.slide {
background: cadetblue;
width: 300px;
height: 150px;
user-select: none;
}
JavaScript
var posSlide, wpmenu, posXmenu;
var $carousel = $(".main");
$carousel.flickity({
contain: true
});
var slideXl;
$carousel.on( 'select.flickity', function( event, index ) {
console.log( 'Flickity select ' + index )
posXmenu = document.querySelectorAll(".nmenu")[index].getBoundingClientRect().x;
slideX = gsap.getProperty(".pcont", "x");
gsap.to(".pcont", {x:slideX+posXmenu*(-1)+40, ease: "power2.out", duration:0.8});
});
$carousel.on( 'pointerMove.flickity', function( event, pointer, moveVector ) {
console.log(moveVector.x);
gsap.set(".pcont", {x:slideXl+moveVector.x});
});