align-items: stretch
делает блоки одинаковой высоты. И надо учесть, это не распространяется на их содержимое. 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
.circle {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: red;
}
.circle .icon {
line-height: 100%;
}
.textwork {
position: fixed;
width: 30%;
right: 40px;
top: 50%;
transform: translateY(-50%);
}
viewport
, например как на тостере:<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
:target
и задать id. Каждый id соответствует хешу ссылки кружочка. Тем самым при клике на ссылку, в адрес страницы добавиться хеш из ссылки, элемент, у которого id такой-же как хеш в адресе страницы, будет задано состояние :target
. Так и манипулируй слайдами, у которых не активно это состояние, те скрывай.