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

Question

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

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

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

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

Comments

[Ankhena]

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

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

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

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

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

[Максим]

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

[Ankhena]

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

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

Ок, повесьте не по две кнопки, а всю пагинацию, ещё проще.

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

Надо гуглить

Answer 1

[sergski]

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

Answer 2

[Евгений Беннер]

На YT канале MaxGraph (не реклама) есть видео с названием "UI-компоненты №1. Карточка товара с несколькими изображениями"
Когда начинал очень помогло, может поможет и Вам )

Answer 3

[alezzz]

Использовали Tiny Slider

Смотреть код

initTinySlider() {
			/**
			 * Content carousel with extensive options to control behaviour and appearance
			 * @requires https://github.com/ganlanyuan/tiny-slider
			 */
			let forEach = function forEach(array, callback, scope) {
				for (let i = 0; i < array.length; i++) {
					callback.call(scope, i, array[i]); // passes back stuff we need
				}
			}; // Carousel initialisation


			let carousels = document.querySelectorAll('.tns-carousel .tns-carousel-inner:not(.tns-slider)');
			let carousels1 = document.querySelectorAll('.preview-slider');
			forEach(carousels1, (index, value) => {
				let defaults = {
					mode: 'gallery',
					container: value,
					controlsText: ['<span class="gm-angle-left"></span>', '<span class="gm-angle-right"></span>'],
					navPosition: 'bottom',
					mouseDrag: true,
					speed: 500,
					lazyload: true,
					autoplayHoverPause: true,
					autoplayButtonOutput: false,
					controls: false,
					navAsThumbnails: false,
					center: true,
					responsive: {
						900: {
							controls: false
						}
					}
				};
				let userOptions;
				if (value.dataset.carouselOptions != undefined) {
					userOptions = JSON.parse(value.dataset.carouselOptions);
				}
				let options = Object.assign({}, defaults, userOptions);
				let carousel1 = tns(options);
				const sectorWith = value.offsetWidth / value.dataset.count; // ширина сектора в зависимости от количества cлайдов
				let positionX = 0; // координата по горизонтали относительно элемента
				let sector = 1; // текущий слайд
				value.addEventListener("mousemove", (e) => {
					let x = e.clientX;
					let rect = e.target.getBoundingClientRect();
					let offsetX = x - rect.left; // текущая координата по горизонтали
					let currentSector = Math.floor(offsetX / sectorWith);
					if (currentSector !== sector) {
						sector = currentSector;
						carousel1.goTo(currentSector);
					}
				});

			});
			forEach(carousels, (index, value) => {
				let defaults = {
					mode: 'gallery',
					container: value,
					controlsText: ['<span class="gm-angle-left"></span>', '<span class="gm-angle-right"></span>'],
					navPosition: 'bottom',
					mouseDrag: true,
					speed: 500,
					lazyload: true,
					autoplayHoverPause: true,
					autoplayButtonOutput: false,
					controls: false,
					navAsThumbnails: false,
					center: true,
					responsive: {
						900: {
							controls: false
						}
					}
				};
				let userOptions;
				if (value.dataset.carouselOptions != undefined) {
					userOptions = JSON.parse(value.dataset.carouselOptions);
				}
				let options = Object.assign({}, defaults, userOptions);
				let carousel = tns(options);

			});
		},

Как это работает можно посмотреть тут