alex-lenk
@alex-lenk
Разработчик сайтов

Как создать создать/найти сложный слайдер для товара?

Здравствуйте. Весь вопрос в скриншотах:
1. Вертикальный слайдер с превью и с зумом при увеличении
6a01808469.jpg

2. Навожу мышь на большое изображение - появляется увеличенная часть этого изображения справа
5b202d657e.jpg

Подскажите, как сделать такой слайдер, в какую сторону смотреть, буду благодарен за любые идеи.
  • Вопрос задан
  • 572 просмотра
Пригласить эксперта
Ответы на вопрос 2
bootd
@bootd
Гугли и ты откроешь врата знаний!
Таких слайдеров на все случаи жизни нет.

Понадобится 2 jQuery плагина:

1) Берёте обычный слайдер, я взял бы slick slider, пока что, мой самый любимый. Делаем 2 слайдера, один большой, 2й карусель с превьюшками, в настройках синхронизируем их и они работают как одно целое.

2) Далее для зумирования берем jQuery Zoom или аналогичные, их легко можно найти на github в поиске. Устанавливаем зумирование на большое фото в слайдере.

Что бы сделать превью, при наведении на стрелочки, придётся написать свою функцию. Это не сложно.
2 функции, одна показывает фото следующего слайда, от активного сейчас, 2я предыдущий от активного сейчас.

Далее, что бы картинки были рядом со стрелочками, вам придётся в настройках использовать кастомные стрелки для переключения. Это делается в настройках плагина. Обернуть каждую стрелочку в дополнительный div и в него уже вставлять картинки.

Всего делов!
Ответ написан
Комментировать
@Antoine
Может, не совсем то, но посмотрите ElevateZoom Plus.
igorlino.github.io/elevatezoom-plus
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы