Как сделать пролистывание картинок в карточке товара?

Question

[Михаил Смирнов]

Всем доброго времени суток!

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

пробовал делать с помощью слайдера swiper, но не совсем понятно как сделать чтобы они менялись при ховере на картинке, да и вообще целесообразно ли использовать свайпер в данном случае

Comments

[Ankhena]

Как запустить autoplay только при наведении на блок, в swiper'e? и т.д.
Что ж вам не гуглится-то?

[Михаил Смирнов]

Ankhena, возможно я не так объяснил. Автоплей не то, что мне нужно.

есть блок с картинкой товара
Например у товара три картинки
блок делится на три (невидимых) равных части по ширине
наводим мышку на левую сторону блока с картинкой, показывается первая картинка, наводим на правую сторону блока показывается последняя картинку, а на середину блока показывается вторая картинка,
ну и если этих картинок 7 шт, то блок делиться на 7 частей и т.п.

при наведении на каждую часть, показывается соответсвующая картинка, такое сейчас почти во всех инет магазинах, озон, мвидео, днс и т.п.

[Максим]

Михаил Смирнов, этот эффект с компьютера смотреть надо?

[Ankhena]

Михаил Смирнов, ну и сделайте там прозрачные кнопки и запускайте листалку, по одной или как угодно.

ну и если этих картинок 7 шт, то блок делиться на 7 частей и т.п.

Кажется, я отстала от жизни. Где посмотреть пример?
Ок, повесьте не по две кнопки, а всю пагинацию, ещё проще.

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

Надо гуглить

Answer 1

[sergski]

По сути это пейдженатор с высотой 100% и транспарентом. При ховере на картинку происходит вывод соответствующего слайда