Как сделать галерею как на авто.ру?

Question

[MFNIK]

Добрый день, есть задача реализовать галерею как на авто.ру или алиэкспресс.
Т.е. есть главное изображение, и ниже или сбоку миниатюры других, при наведении на которые меняется главное изображение в соответствии с миниатюрой.
Гугл и яндекс ни чего полезного не предлагают, скорее всего не точно ввожу запрос.
Может быть у кого то есть готовое решение или кто то даст ссылку на ресурс с похожим решением.
Спасибо!

Answer 1

[Владислав Лысков]

agragregra.github.io/Brazzers-Carousel

Comments

[MFNIK]

Спасибо! Но немного не то...
Нужно как тут
А в вашем решении не понятно как выводить миниатюры.

[Владислав Лысков]

MFNIK, fotorama.io/customize/thumbnails

[MFNIK]

Владислав Лысков, спасибо но опять не то((... Мне нужно что бы при наведении на миниатюру менялось основное изображение. Как так сделать я не понимаю.

[Владислав Лысков]

MFNIK, ну так сделай, смотри инспектор, на авто.ру используется именно этот плагин

[MFNIK]

Владислав Лысков, щас попробую, хотя как и писал даже не понимаю как это сделать. Код с авто ру мне не о чем не говорит, если только вот это data-bem="{"link":{}}"

[Владислав Лысков]

MFNIK,так смотреть надо на классы слайдера

[MFNIK]

Владислав Лысков, спасибо но я не понимаю. Те классы которые указаны на авто ру писали конкретно под этот проект, откуда я знаю как там все устроенно.
Вот это мне не о чем не говорит

fotorama__wrap fotorama__wrap--css3 fotorama__wrap--fade fotorama__wrap--toggle-arrows fotorama__wrap--no-shadows fotorama__wrap--no-controls

[MFNIK]

Владислав Лысков, Владислав еще раз спасибо, просто я уже 3 час ищу решение и уже немного подбешивает. В JS я полный ноль, мне нужно готовое решение ctrl c, ctrl v, если у Вас нет такого не тратьте время на меня, я ценю Ваше время! Спасибо еще раз за решение, возможно кто то другой даже вопросов не задавал, но не я!

Answer 2

[Ольга Ветер]

Мне нужно что бы при наведении на миниатюру менялось основное изображение. Как так сделать я не понимаю.

Посмотрите slick slider kenwheeler.github.io/slick а конкретно вот это решение Slider Syncing. Вкратце - вам нужно делать два слайдера, один с миниатюрами, другой с полноценными картинками и связывать их. То решение, что я предлагаю вам посмотреть позволяет это сделать с практически нулевыми знаниями JS.

Comments

[MFNIK]

Спасибо за помощь!