Как менять картинки у карточки в списке товаров?

Question

[tgarl]

Есть каталог. В списках товаров у каждого товара несколько картинок. При наведении на какую-то часть картинка меняется. При этом на мобильной версии работает смахивание, а на десктопе только наведение.
Как делают такие вещи. Не выходит найти плагины.

Comments

[Adamos]

Вы, простите, может быть, даже слова "carousel" не слышали?..

[tgarl]

Я знаю что такое карусель, я не знаю как задать правильно поиск того что хочу. Потому и создал тут тему.

[Adamos]

tgarl, например, посмотреть подборку "полсотни каруселей на любой вкус" и выбрать ту, которая подходит.
Вряд ли кто-то расписывал нужное вам поведение так, чтобы вы угадали, какими словами он это делал.
И уж совсем вряд ли кто-то делал это по-русски.

[Ankhena]

tgarl, Ну вот хоть прям так и забейте в яндекс "Слайдер как на маркетплейсах".
Вот с описанием https://sitist.ru/slider-like-on-marketplaces.html
На мобилках подключаете swiper
Сложно представить как можно не найти подходящие.

[tgarl]

пробовал, выдает все что угодно, но не то.(всякие создания сайтов и прочее вылезает, но ни как не сладеры)
Я бы и сам накидал похожее, но если вариант для десктопа я могу сделать(ховер+ опасити), то вот для мобильной версии, когда там свайп происходит, а не ховер. А на картинке еще и ссылка которая при свайпе не должна срабатывать - вот это для меня проблема. поэтому и думал что есть готовые уже варианты и я могу либо их разобрать или полностью взять.

[ThunderCat]

20 секунд:
Для реализации функционала, когда на десктопе при наведении меняется картинка товара, а на мобильной версии — при смахивании (свайпе), можно использовать следующие подходы и плагины:

1. jQuery-плагины с поддержкой смены изображений при наведении и свайпе. Например, плагин swapImagesOnhover — он меняет изображения с эффектом плавного перехода при наведении, а можно добавить поддержку свайпов на мобильных устройствах через дополнительный скрипт или библиотеку свайпов (Web:7).

2. Для мобильной версии можно совместить эффекты hover и swipe с помощью комбинации CSS и JS. На мобильных устройствах hover заменить на событие касания или свайпа, например с помощью библиотеки touchSwipe. Это обычная практика, так как Mobile не поддерживает hover (Web:1, Web:8).

3. Для WooCommerce и подобных платформ существуют готовые плагины с поддержкой смены изображения товара при наведении на десктопе и свайпе на мобильном, например, WowStore Product Image Flipper addon (Web:5).

4. Если нужен универсальный подход, можно взять слайдер с поддержкой свайпа (например, FlexSlider) и добавить к нему кастомный скрипт замены изображений при наведении на десктопе (Web:6).

Таким образом, наиболее универсальный путь — использовать скрипт, меняющий изображение при hover в десктопном режиме и подключить библиотеку для свайпа на мобильных устройствах, чтобы переключать изображения жестами. Среди уже готовых решений выделяются swapImagesOnhover для эффекта hover и FlexSlider или другие swipe-слайдеры для поддержки свайпа.

[1](https://community.shopify.com/t/product-card-secon...)
[2](https://stackoverflow.com/questions/22559756/chang...)
[3](https://forum.squarespace.com/topic/318141-second-...)
[4](https://www.reddit.com/r/web_design/comments/v3gbn...)
[5](https://www.wpxpo.com/how-to-flip-or-change-a-prod...)
[6](https://stackoverflow.com/questions/8531079/how-to...)
[7](https://www.jqueryscript.net/other/Image-Swap-Hove...)
[8](https://community.shopify.com/t/how-can-i-enable-s...)
[9](https://discuss.frappe.io/t/product-image-zoom/12452)
[10](https://stackoverflow.com/questions/34767900/jquer...)
[11](https://xtemos.com/forums/topic/product-image-chan...)
[12](https://cs.wordpress.org/plugins/image-hover-effec...)
[13](https://forum.jquery.com/portal/en/community/topic...)
[14](https://www.kadencewp.com/kadence-blocks/feature-r...)
[15](https://www.jqueryscript.net/zoom/product-image-ma...)
[16](https://forum.jquery.com/portal/en/community/topic...)
[17](https://help.gempages.net/articles/add-zoom-hover-...)
[18](https://fooplugins.com/thumbnail-hover-effect/)
[19](https://www.youtube.com/watch?v=OYxTFGYoSoE)
[20](https://www.8theme.com/topic/image-resize-dependin...)

Answer 1

[Сергей delphinpro]

нужно взять любой слайдер.
по умолчанию на мобильных он будет работать как слайдер - перелистывать слайды-картинки
на десктопе поверх всего слайдера растягиваете блок с dots pagination (точки для листания слайдов). стилизуете их, делая полностью прозрачными. и добавляете к ним обработчики наведения мышки. в обработчике определяете точку на которую навелись и переключаете слайдер к нужному слайду.

если говорить о swiper то вот пример hover-навигации Как менять слайд SwiperJS при наведении?