Слайдер для мобильной версии, замена изображения

[Mariya812]

Добрый день. Вопрос к профи. На стандартной теме опенкарт 3 в баннере на главной – лежат картинки. Управляем ими свайпер и скрипты опен карта. Со свайпером я знакома, а вот с опенкартом нет(
Мне нужно заменить каждое изображение слайдера для мобильной версии, даже наверное начиная от ширины @media (max-width: 480px) мне уже нужны другие изображения.
Подскажите, как правильнее реализовать. 
Я делала ручками так: клала в див слайдера 2 картинки и скрывала их в зависимости от ширины экрана. (на своем собранном сайте)
Здесь другой код в твиге: <div class="swiper-slide">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />{% endif %}</div>
      {% endfor %}</div>
Никак не разберу как реализовать. положила так же в див свои слайдеры (для мобильных) не отображаются. В классах скрыла .swiper-slide a img {display: none}, первый слайд скрылся, а второй нет. Высота тоже не меняется, может дело в ней....

 

Помогите кто-нибудь, может кто-то знает.

Сайт у меня пока на локалке.
P.S. Я не программист, я дизайнер и художник, но, как говорится: "жизнь заставит". Пытаюсь сделать свой сайт сама... пока очень медленно и тяжело(

[REDDI]

<picture>
            <source media="(max-width: 480px)" srcset=""{{ banner.image2 }}">
            <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive">
 </picture>

[Mariya812]

1 час назад, REDDI сказал:

<picture>
            <source media="(max-width: 480px)" srcset=""{{ banner.image2 }}">
            <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive">
 </picture>

Спасибо большое, но мне это не помогает, потому что я не понимаю где находятся banner.image.
Вы можете подробнее объяснить. Куда мне положить фото на замену и присвоить им banner.image2.
Что бы они шли на замену большим изображениям. Это через базу данных делается? Или есть какие-то другие файлы.
… Или мне проще руками сделать этот свайпер без вывода фото в панель администрирования, так я смогу, по Html разберусь.

[REDDI]

11 часов назад, Mariya812 сказал:

Спасибо большое, но мне это не помогает, потому что я не понимаю где находятся banner.image.
Вы можете подробнее объяснить. Куда мне положить фото на замену и присвоить им banner.image2.
Что бы они шли на замену большим изображениям. Это через базу данных делается? Или есть какие-то другие файлы.
… Или мне проще руками сделать этот свайпер без вывода фото в панель администрирования, так я смогу, по Html разберусь.

Я просто в 2.3 версии делал в админке еще одно поле для доп.изображения, в 3 так же надо. Но подсказать или сделать не смогу - не работал с ней ни разу

[Mariya812]

7 часов назад, REDDI сказал:

Я просто в 2.3 версии делал в админке еще одно поле для доп.изображения, в 3 так же надо. Но подсказать или сделать не смогу - не работал с ней ни разу

Я в общем решила сделать так: отключаю все эти модули опенкарт: баннеры и слайдеры.
Создаю на базе блока Html все свои слайдеры + подключаю к ним скрипты в контроллере админ и прописываю скрипт в твиг
Далее в css настраиваю смену изображений для мобильной версии.
Учитываю мое не знание языков JS и php вариант только верстать всё на Html.
Конечно в админ панели я не буду ничего видеть, но так как сайт я делаю для себя - могу и ручками прописывать пути к изображениям.
Возможно кому-то подойдёт мой путь решения.

Очень надеюсь, что всё же кто-то откликнется и объяснит мне как сделать иначе. Я понимаю, что мне надо будут создавать наверное массивы, я бы изучила.
А пока у меня всё отлично работает в таком варианте.

[shop12]

В 07.12.2019 в 08:13, REDDI сказал:

Я просто в 2.3 версии делал в админке еще одно поле для доп.изображения, в 3 так же надо. Но подсказать или сделать не смогу - не работал с ней ни разу

 

А как в админку вывести поле для изображения для мобильного. Куда и что прописывать? (ocstore 2.3)