Как сверстать такой слайдер?

Question

[CrewCut]

По центру адаптивный блок фиксированной ширины от bootstrap. На его границах переключалки слайдов, при этом контент слайдера идет на всю ширину, по краям скрываясь за полупрозрачными блоками.

Вопрос в том, как эти блоки по краям сделать (где белый полупрозрачный, от кнопок до конца экрана). С остальным разобрался

Answer 1

[Mr Crabbz]

наложите слева и справа полупрозрачные белые блоки с абсолютным позиционированием.

Comments

[CrewCut]

А каким в данном случае будет позиционирование? От левого края до точки Х, равной началу контейнера. Как вот это задать можно?

[Mr Crabbz]

CrewCut: position: absolute; left: -100%;
сами блоки - лучше сделать псевдоэлементами before и after для контейнера.
Смотря конечно как у вас код выглядит.

[Mr Crabbz]

CrewCut: tahe-cosmetics.ru - вот как я клиенту делал подобное

Answer 2

[Максим Тимофеев]

Берем любой js слайдер, который может крутить по несколько изображений, с помощью css модифицируем блоки с кнопками, добавляя им объем, прозрачность и все что угодно.
По вкусу допиливаем js

Answer 3

[Сергей Тутуков]

как я понимаю у вас слайдер лежит в .container, а не в container-fluid
Обертки слайдера

.slider{
  position:relative;
}

.slider:before,.slider:after{
  content:'';
  display: block;
  position:absolute;
  top:0;
  bottom:0;
  width: 100%; /*Вот тут проблема, чтобы точно определить расстояние от края до контейнера слайдера*/
  width:calc((100vw - 1000px)/2);  /*Смотрите кроссбраузерность*/
  background:rgba(255,255,255,.8);
}
.slider:before{
  right:100%;
}
.sliderr:after{
  left:100%;
}

codepen.io/STutukov/pen/mPardX
calc
если calc не подходит, то нужна еще обертка oveflow, чтобы она скрывала все что за пределами экрана. Короче разберетесь)))