Как сверстать карусель?

Question

[mydarck]

Есть такой элемент шаблона:

Это карусель с увеличивающимся центральным блоком.
Основные задачи:

• Сделать отступы одинаковыми независимо от размера блока;
  
• В данной карусели не предусмотрены ни prev/next стрелки, ни 'dots' переключатели. По этому листать его можно только перетаскиванием правого/левого блока в цент.
  

На первый взгляд мне показался подходящим Slick.js, тем более, что у него уже из 'коробки' есть центрирующий мод.
Какие с ним возникли трудности:

• Центральный блок увеличивается за счет transform scale, который получает в качестве значения относительные величины, а не точные. В результате у центрального блока присутствует погрешность, пусть и не значительная.
  
• Отступы не пересчитываются в зависимости от центрального блока, а компенсируются. Т.е. между блоками находящимися слева и справа от центра отступы меньше, чем между остальными.
  

Если есть идеи или более подходящий скрипт карусели, подскажите пожалуйста.
Если хотите или нужны примеры моих попыток, напишите, я выложу их в комментариях.

Answer 1

[Сергей Горячев]

kenwheeler.github.io/slick
Center Mode
arrows: false
controls: false
И совсем не понимаю, чем он тебя не устраивает.
Но судя по описанию, ты просто не так его готовишь.
Решается через переопределение CSS.

Comments

[mydarck]

Он меня устраивает и может быть это даже самое лучшее решение. Но CSS'ом это не решается т.к. отступы вычисляются с помощью JS в момент формирования карусели. Я так понял мои несколько примеров попыток все-таки нужны.
Про это все:
Center Mode
arrows: false
controls: false
я заню по этому я и выбрал Slick.

[Сергей Горячев]

mydarck: Собственно, Сергей вам уже ответил ниже подробно про переопределение стилей.

[Сергей Горячев]

mydarck: От себя добавлю, что если влезть в код плагина, можно вообще убрать какие-либо отступы, чтобы сделать на CSS так, как нужно. У плагина открытый код, делайте что хотите и все проблемы только из головы.

[mydarck]

Sergey Goryachev: Так в этом и вся штука. Я использую gulp и плагин bower. Соответственно весть код сохраняется в одном месте потом стили конкратинируются в остальными CSS файлами, сжимаются и переносятся в папку проекта. Та же история и JS. Да, теоретически можно исправить в коде самого плагина нужные скрипты/стили, но хотелось на него воздействовать внешними файлами "тонкой настройки" - main.css и common.js. Мне кажется это более правильно и "элегантно". Естественно это мое субъективное мнение. Комментарии Сергея видел, но еще не попробовал сделать так, как он описал. Сделаю, отпишусь.

Answer 2

[Олег]

удобство данной карусели под большим вопросом! я для карусели всегда использую owl-карусель. для всех моих задач она всегда подходила.

Comments

[Сергей delphinpro]

Как в owl-carousel назначить в качестве кнопок prev-next уже существующие кнопки в совершенно постороннем контейнере?

Prev
  Next


...

[Сергей delphinpro]

Код не вставился -

<div class=buttons>
  <button>prev</button>
  <button>next</button>
</div>
...
<div class=owl-carousel></div>

[mydarck]

Олег: я тоже долгое время использовал OWL и даже для данного проекта пробовал, но там нужно больше переделок для моей конкретной задачи.

Answer 3

[Егор Живагин]

Центральный блок увеличивается за счет transform scale, который получает в качестве значения относительные величины, а не точные. В результате у центрального блока присутствует погрешность, пусть и не значительная.

- Своим css добавь блоку .slick-center любые необходимые стили

Отступы не пересчитываются в зависимости от центрального блока, а компенсируются. Т.е. между блоками находящимися слева и справа от центра отступы меньше, чем между остальными.

- Так ты ж сам в стилях их хоть margin-ами в пикселях можешь сделать)

Слик хорош тем, что довольно просто кастомизируется/поправляется обычным css. И не надо даже лезть в файлы плагина)

Comments

[mydarck]

Да я вроде все понимаю и довольно долго занимаюсь версткой, но эта задача стала своего рода камнем преткновение. Можете ради интереса попробовать сверстать. Уверен найдете найдете для себя много интересных подводных камней. А я в свою очередь, через часок, выложу свои потуги с описанием возникающих проблем.