Как лучше реализовать слайдер который уходит за границы контейнера?

Question

[Blondguy]

Как лучше сделать так чтобы слайдер уезжал за границы общепринятого контейнера?

Answer 1

[Виталий Першин]

Упрощенная формула для понимания концепции без учета padding и border:


Более простой вариант со скрытием сайдов с левой стороны:

Answer 2

[Сергей delphinpro]

Фраза "Как лучше реализовать" подразумевает, что вы уже как-то реализовали, и интересуетеь, можно ли сделать лучше. Но при этом не показали, что у вас есть. =)

Ладно, скорее всего слово "лучше" из вопроса нужно выкинуть..

1. Завернуть слайдер в контейнер с overflow:hidden. При этом ограничивающий контейнер олжен быть внутри:

.slider-wrapper
  .container
    .slider

2. Убрать overflow:hidden у слайдера.
На этом этапе слайдер не будет ограничен с обоих сторон

3. дать слайдам стиль opacity:0
активному слайду дать стиль opacity:1
слайдам, следующим после активного дать стиль opacity:1

Теперь визуально слайдер будет ограничен слева и неограничен справа.

Однако скрытые слайды все равно будут кликабельны. Если нужно этого избежать, то вместе opacity устанавливайте стиль pointer-events

opacity:0;pointer-events:none;
opacity:1;pointer-events:all;

Comments

[Blondguy]

спасибо большое, попробую!

[Blondguy]

попробовал, честно не очень получилось, чему именно давать и не давать overflow hidden?

[Сергей delphinpro]

Blondguy, слайдер, который вы будете использовать, дает дополнительные классы для каждого слайда, на них следует опираться.
Виталий Першин в соседнем ответе во втором варианте это продемострировал.