Можно ли сделать карусель видео на slick slider?

Question

[Даниил Вершинин]

Задача:
Реализация на Slick:

<div class="vid">
            <div><div style="position:relative;height:0;padding-bottom:75.0%"><iframe src="https://www.youtube.com/embed/UPGiUh726eI?ecver=2" width="480" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div><p>Бла Бла</p></div>
            <div><div style="position:relative;height:0;padding-bottom:75.0%"><iframe src="https://www.youtube.com/embed/UPGiUh726eI?ecver=2" width="480" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div><p>Бла Бла</p></div>
            <div><div style="position:relative;height:0;padding-bottom:75.0%"><iframe src="https://www.youtube.com/embed/UPGiUh726eI?ecver=2" width="480" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div><p>Бла Бла</p></div>
            <div><div style="position:relative;height:0;padding-bottom:75.0%"><iframe src="https://www.youtube.com/embed/UPGiUh726eI?ecver=2" width="480" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div><p>Бла Бла</p></div>
          </div>

$('.vid').slick({
        centerMode: true,
        centerPadding: '60px',
        slidesToShow: 3,
        responsive: [
          {
            breakpoint: 768,
            settings: {
              arrows: false,
              centerMode: true,
              centerPadding: '40px',
              slidesToShow: 3
            }
          },
          {
            breakpoint: 480,
            settings: {
              arrows: false,
              centerMode: true,
              centerPadding: '40px',
              slidesToShow: 1
            }
          }
        ]
      });

Со стилями покапаюсь сам))

Итог получается даже нессответствующим документации - нет отступов:

Можно ли подобное реализовать именно на slick??

Если нет, то какой плагин посоветуете??

Answer 1

[Александр Аксентьев]

width="480"

style="position:absolute;width:100%;

может таки разобраться с размерами и убрать лишние(свои, если второй стиль slick добавил)?
И потом уже ковырять отступы и т.д.

Comments

[Даниил Вершинин]

а как сделать именно такой эффект карусели? (с затемнением и уменьшением)

[Александр Аксентьев]

Даниил Вершинин: слик сам же делает centerMode.
Вопрос в том чтобы убрать все стили и разобраться с корректным отображением для начала.