@vampire444

Какой взять слайдер для видео, с увеличенным видео по середине и уменьшенными справа и слева?

На сайте нужен слайдер, выглядящий следующим образом. Показываются три видео (пока их всего три и есть). То, которе по середине побольше, те, что с краёв - меньше. Видео там будет из ютуба, т.е. свой плеер никакой не нужен. При клике на одно из крайних видео оно должно увеличится и встать по центру. Т.е. эта карусель должна как бы прокрутится. Соответственно остальные два уменьшаются. Возможен вариант без прокрутки, т.к. пока видео всего три. В таком случае изначально увеличено так же центральное видео, при клике, например, на правое оно становится больше и начинает проигрываться, а левое и центральное остаются маленькими. Описал сумбурно, но вроде понятно =)

ЗЫ: сейчас это сделано с помощью slick, и всё в принципе работает, кроме одного НО. Что бы посмотреть левое или правое видео, нужно сначала листнуть стрелочкой на нужное видео и только потом нажать play. Можно конечно нажать play и когда оно справа/слева, но тогда оно и будет там проигрываться, маленьким и сбоку. Так что как вариант рассматриваю допилить этот слайдер так, что бы по клику на правое/левое видео оно пролистывалось на центр и там уже воспроизводилось. Этим собсна сейчас и занимаюсь, правда пока безуспешно.
  • Вопрос задан
  • 385 просмотров
Решения вопроса 1
DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?
Оставляйле slick.
У проигрывателя есть api и колбэк onPlayerStateChange, который срабатывает при воспроизведении/паузе. Так в нём просто перематывать слайдер на нужны слайд.

https://developers.google.com/youtube/iframe_api_r...

Впрочем, можно попробовать и без апи, обернув iframe в допблок:
codepen.io/anon/pen/WxWjxG
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы