Можно попробовать и с js но у меня ничего не получилось,
отдельные библиотеки тут для другой джавы , но опять же даже со swiper не смогла настроить ,
хотелось бы чтобы при нажатии на одну из кнопок , блок minii плавно переместился прямо под низ нажатой кнопки
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="genere.css">
<link rel="shortcut icon" href="inan/favicon.ico" corssorigin>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
<script src="proect.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<title>FULL-HD-GENERE</title>
</head>
<body>
<div class="tema">
<ul class="tema-ul">
<li><button type="button" class="buttong" onclick="location.href=''">Action</button></li>
<li><button type="button" class="buttong" onclick="location.href=''">Drama</button></li>
<li><button type="button" class="buttong" onclick="location.href=''">Horror</button></li>
<li><button type="button" class="buttong" onclick="location.href=''">Mistory</button></li>
<li><button type="button" class="buttong" onclick="location.href=''">Adventure</button></li>
<li><button type="button" class="buttong" onclick="location.href=''">Fantasy</button></li>
</ul>
</div>
<div class="minii"></div>
<div class="tema-mv"></div>
</body>
</html>
.tema{
display: flex;
justify-content: center;
align-items: center;
margin-top: 60px;
}
.tema-ul li{
display: inline;
}
.buttong{
background-color: #000000;
border: none;
outline: none;
color: #ffffff;
font-size: 1.8rem;
margin: 0px -5px;
padding: 20px 50px;
cursor: pointer;
transition: all ease 0.3s;
}
.tema-ul button:hover{
background-color: rgba(84, 0, 0, 0.514);
transition: all ease 0.3s;
}
.minii{
position: absolute;
z-index: -1;
background-color:#0d0d0d ;
width: 202px;
height: 60px;
top: 245px;
left: 316px;
transition: ease 2s;
}
.active{
left: 200px;
}
.tema-mv{
background-color: #0d0d0d;
width: 1288px;
height: 500px;
margin-top: 55px;
margin-left: 316px;
position: relative;
}
const buttong=document.querySelector('.buttong');
const minii=document.querySelector('.minii');
buttong.addEventListener('click',function(){
minii.classList.add('active');
});
