Как реализовать такую форму?

Question

[Adilet Zhuman]

Как можно такое реализовать? Так понимаю это форма с предварительным выбором.
joxi.ru/n2Y3ZOpSoVnp8r
Исходный сайт https://cantra-minsk.by/

Answer 1

[Dymok]

В зависимости от выбранного размера и цвета просто подменяется изображение на другое готовое, в инструментах разработчка видно

Comments

[Adilet Zhuman]

Да, как такое реализовать?=)

[Сергей Герасимов]

Adilet Zhuman, используя javascript, например.

Лучше, конечно, используя svg это делать.

[Adilet Zhuman]

Сергей Герасимов, есть плагины? Примеры как делать? Просто с ja пока на вы

[Златослав Десятников]

Adilet Zhuman, так изучайте, раз на "вы".

[Adilet Zhuman]

Златослав Десятников, есть направление? На пример что бв решить эту проблему?

Answer 2

[Полина Емельянова]

Так...
1. Карусель с цветами - это "тупой" коленовский Slick slider. Погуглите.
2. "Слайдер" секции выше - обманка. Это просто жестко спозиционированный блок, в который на событие "клик по слайду с цветом" выводится соответствующая картинка. Каждая картинка идеально центрирована и одного размера, отсюда иллюзия, что меняется только чехол, а не вся картинка.
3. С ДжЫэсом на ВЫ... Тогда готовьтесь к БОЛИ.
Делаем форму с радиоботоннами и лаблами, которые загоняем в слик слайдер.
Делаем див, куда зашиваем ВСЕ картинки и позиционируем их абсолютом с прозрачностью.
Дальше на клик-эктив меняем прозрачность у нужной картинки в блоке.

Я бы сделала так.
Прошу коллег поправить, если есть что сказать по существу.

Такой подход даст вам только функцию смены цвета, но не позволит реализовать изменение формы.
Т.к. на это потребуется море подобного кода.

Comments

[Adilet Zhuman]

Идея не плохая, но загвоздка в том что мне потом нужно будет это отправлять через форму на почту)

[Adilet Zhuman]

и то что мне нужно не только менять цвет, но и другие параметры

[Полина Емельянова]

Adilet Zhuman, Так все это и нужно(!!) завернуть в форму!
А т.к. радио-кнопки неотъемлемая часть форм, то они легко обрабатываются и отправляются по сабмиту. Надеюсь, бекэндер вам сможет помочь в этом.

[Adilet Zhuman]

Полина Емельянова, тут дело вот в чем) я должен это реализовать своими силами) без участия backendera)