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

Question

[ufabooks113]

Есть рисунок в psd формате в виде сот. Нужно в куждую соту вставить слайдер меняющий изображения с разной скоростью
основная проблема как это сверстать

Answer 1

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

hexagon

Comments

[ufabooks113]

задача ведь не изобразить многоугольник средствами css
а засунуть туда например bxslider
и изображения внутри сот ведь частично пересекаются по вертикали

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

ufabooks113, это мне как-раз кажется не самой сложной частью - можно положить блок со слайдером внутри блока-соты.
Можно задать такую форму самому слайдеру и делать fade-переключения , без анимации пролистывания (пример - slick.js с fade: true )

Хотя мне кажется, что столько слайдеров могут слишком сильно нагрузить страницу. Не думали просто кидать картинки в блок-соту и по-очереди делать их активными? Строчек 10 кода выйдет )

[ufabooks113]

Егор Живагин, к сожалению не большой спец именно js
подскажешь как это?

Answer 2

[Alexey Petryakov]

preview.themeforest.net/item/matrix-responsive-wor...

Данный слайдер есть в открытом доступе, если нету собственных идей на написание с нуля, то можно модифицировать этот слайдер, слегка изменив код СSS, заменив прямоугольники на шестигранник и убрав отступы между ними и так далее.

Comments

[ufabooks113]

спасибо