Посмотрите на swiper.js
Или выберите какой-то еще из готовых. Либо напишите свой, если там переключение только по булетам.
Зависит от того, что написано в ТЗ по поводу функциональности этого слайдера.
1. Псевдоэлементы или бордеры или градиенты или что-то ещё. Красоту - в стили, информацию - в разметку. Эти палочки это украшение - значит, стили.
2. Нет однозначного ответа, зависит от макета и поведения при адаптиве.
В данный момент картинка привязана к текущему расположению сдвинутого слайда.
Чем привязана? Как привязана? Картинка привязана или её обертка? И т.д.
Думаю, понятно к чему я веду? Делайте песочницу на codepen.io или аналоге, чтобы было видно, что у вас там происходит.
nonconformiste, послушайте, вы написали утверждение не соответствущее истине. И обозвали его базой.
Контекст наложения это часть спеки.
Ответом на вопрос это тоже не является.
Назвать спеку ересью...
И если что, я не призывала использовать отрицательный z-index, если есть возможность этого не делать.
Просто написала, что вы ошиблись и дали новичку неверную информацию, которую он может принять за истину и ляпнуть где-нибудь на собеседовании.
Теперь, вместо того, чтобы просто поправить ошибку или удалить ответ, вы ведете себя странно.
Никита, оригинально. В вашей песочнице псевдо даже не в ту сторону повернут и сам дочерний не поставлен куда надо.
Можно начать так: https://codepen.io/AnnaSummer/pen/LYdGoxP
Дальше вам потребуется js и немножко тригонометрии, чтобы сдвинуть псевдо с градиентом к нужному углу.
Удобно через кастомные свойства.
Альтернатива: нарисовать градиентный фон для родителя, а поверх него дорисовать тоже градиентом черные куски. Можно совместить с псевдо.
Мне всегда так нравится как вы спрашиваете про плагины и codepen.
С чем у вас сложности? Не знаете как называются элементы и не знаете где поиск по codepen? Про где гугл не буду делать предположений.
Для этого нужно указать, несовместимости с чем именно вас тревожат.