Как правильно реализовать горизонтальный скролл секций?

Question

[NikFedoseev]

Господа, расскажите что делаю не так. Делаю что то, типа горизонтального скролла для секций, но что-то не хочет адекватно работать. Накидал основную идею в кодепене
https://codepen.io/nikfedoseev/pen/ajGKpN

Comments

[NikFedoseev]

Решил часть, но теперь вопрос почему двигаются не синхронно?

Answer 1

[Anton fon Faust]

а должно-то как работать?

Comments

[NikFedoseev]

Есть одна секция с контентом, есть ещё другая (или несколько). Должно работать так что, я нахожусь на какой то секции, нажимаю кнопку в право и моя секция на которой находился уезжает, и на ее место приезжает та что справа. Аналогично с кнопкой налево

[Anton fon Faust]

NikFedoseev, так у вас transition нигде в стилях не прописан. Вот и происходит все моментально.

.section {
  transition: all 1s;
}

[NikFedoseev]

Anton fon Faust, но оно моментально ведь работает не правильно. Зеленый блок сменяется на желтый а обратно никак

[Anton fon Faust]

NikFedoseev, так вы почитайте свой код - он работает ровно так, как вы его написали.
Когда вы сдвигаете один элемент с помощью translate, остальные не сдвигаются никуда.
Если хотите сделать слайдер, лучше разместите элементы в горизонтальный ряд и оберните в блок с overflow: hidden;

приблизительно так:

<div class="wrapper">
    <div class="slides">
        <div class="slide slide1"></div>
        <div class="slide slide2"></div>
        <div class="slide slide3"></div>
    </div>
</div>

.wrapper, .slide {
    width: 200px;
    height: 200px;
}
.wrapper{
    overflow: hidden;
    position: relative;
}

.slides {
    width: 600px;
    height: 200px;
    position: absolute;
}
.slide {
    display: inline-block;
}

а дальше по клику делайте transform:translateX на нужное количество пикселей.

[NikFedoseev]

Anton fon Faust, использовл translate3d потому что можно указать проценты. Здесь нужно будет перед каждым сдвигом счиать размер секции и на нее передвигать, да?

[Anton fon Faust]

translate без 3d точно так же поддерживает проценты как и любые другие единицы измерения.
Только почитайте от какого значения какого элемента будут считаться проценты, чтобы указать верное значение )

[NikFedoseev]

Anton fon Faust, благодарю :)