z-index
не забудь и transition
. По клику на левую все наоборот. Тут тебе ненужны никакие сторонние слайдеры. Все положения прописываешь в css, у тебя их пять. Потом на js задаешь нужный класс каждому элементу и они сами переместятся. <div>
<div>CREATIIVES</div>
<div class="sub-title">
<div>S</div>
<div>U</div>
<div>B</div>
<div>-</div>
<div>T</div>
<div>I</div>
<div>T</div>
<div>L</div>
<div>E</div>
</div>
</div>
.sub-title {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.row
.col-6
.row
.col-12
.col-12
.col-12
.col-12
.col-6
.textwork {
position: fixed;
width: 30%;
right: 40px;
top: 50%;
transform: translateY(-50%);
}
align-items: stretch;
<div class="flex">
<div>1</div>
<div>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
</div>
</div>
.flex {
display: flex;
align-items: stretch;
}
.flex div:first-child {
background: red;
}
.flex div:last-child {
background: green;
}
.carousel-item {
width: 100vh;
height: 100vh;
}
.carousel-item {
width: 100%;
height: 100%;
object-fit: cover;
}