Привет! Учусь верстать, и на странице нужно сверстать карусель, да не простую, вот как она должна выглядеть:
Суть в том, что на экране 5 слайдов, то что по центру должен выводить дополнительную информацию. Думаю как лучше решить эту задачу.
Пока что решил сделать это с помощью jquery slick. Эта карусель в настройках имеет свойство centerMode: true, которое в том числе, добавляет класс центральному слайду .slick-center, и в css можно прописать стили что бы выводилась информация по центру и скрывалась круглая фото (или менялись ее размеры, позиция и border-radius).
В результате, по сути выйдет, что в каждом слайде будет два блока div, один будет скрыт, а другой показан, в зависимости от того, центральный он или боковой.
Коллеги в верном ли я направлении или, как обычно, изобретаю велосипед?
Ответ
Набросал вам небольшой шаблончик, остальное уже сами стилизуете:
.owl-item.active.center img{
height: 260px !important;
}
Комментариев нет:
Отправить комментарий