Jump to content
Mariya812

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

Recommended Posts

Добрый день. Вопрос к профи. На стандартной теме опенкарт 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. Я не программист, я дизайнер и художник, но, как говорится: "жизнь заставит". Пытаюсь сделать свой сайт сама... пока очень медленно и тяжело(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 разберусь.

Share this post


Link to post
Share on other sites
11 часов назад, Mariya812 сказал:

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

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

Share this post


Link to post
Share on other sites
7 часов назад, REDDI сказал:

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

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

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

Share this post


Link to post
Share on other sites
В 07.12.2019 в 08:13, REDDI сказал:

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

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By SirGrey
      Модуль добавляет дополнительные изображения к категории и выводит их как слайдер на странице.
       
      Демо
       
      http://categoryimageslider.proopencart.com/index.php?route=product/category&path=20
       
       

    • By SirGrey
      350.00 руб
      Скачать/Купить дополнение


      Category Image Slider (Слайдер в категории)
      Модуль добавляет дополнительные изображения к категории и выводит их как слайдер на странице.
       
      Демо
       
      http://categoryimageslider.proopencart.com/index.php?route=product/category&path=20
       
       

      Добавил SirGrey Добавлено 26.01.2020 Категория Модули Системные требования Метод активации Без активации Ioncube Loader Нет OpenCart 3.0 ocStore 3.0 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Нет Старая цена 0  
    • By didar21
      Здравствуйте! Помогите, пожалуюста. Столкнулся с такой проблемой Слайдшоу исчезает после установки модуля quickcheckout для оформления заказа, как удаляю это модуль Слайд снова появляется, но этот модуль мне обязательно нужен. Не знаю почему так происходит. Можете. пожалуюста, объяснить или дать решения этой проблемы. Спасибо заранее!
    • By Sunser
      Smart slider  - улучшенный слайдер для сайта
       
      Расширение подходит и тестировалось на версиях Opencart 2.0, 2.1, 2.2, 2.3 и 3.0
      Расширение подходит и тестировалось на версиях ocStore 2.1, 2.3 и 3.0
      Данные версии CMS брались с официальных сайтов OpenCart и ocStore.
       
      Smart slider - это модуль для создания и вывода слайдера на сайте. Данный модуль создан и работает на основе популярного слайдера Slick Slider.
      Данный модуль имеет очень большой функционал и расширенные возможности для возможных доработок по своему желанию.
       
      -- Установка расширения:
      1) Зайдите в свой установщик модификаторов, в админ панели, выберите модуль нужной версии, после чего установите;
      2) После установки зайдите в модификаторы и обновите свои модификаторы;
      3) После этого зайдите в модули или расширения и выберите сам модуль и настройте его;
      4) После настройки модуля зайдите в раздел "Дизайн >> Макеты" и выберите страницу и место где вы хотите вывести модуль.
       
      -- Что может модуль:
      1) Модуль мультиязычный, потому подстраивается под версию языка и его настройки тоже;
      2) Модуль адаптивен, в настройках можно указывать отдельно адаптив под мобильную версию;
      3) В модуле возможно загружать видео;
      4) После установки модуля на сайте будет возможность загружать на сайт видео в формате mp4 и webm и svg иконки;
      5) Основные настройки слайдера/возможности:
      - Показывать стрелки на ПК;
      - Показывать стрелки на Телефоне;
      - Показывать навигацию на ПК(точки/dots);
      - Показывать навигацию на Телефоне(точки/dots);
      - Автовоспроизведение;
      - Скорость автозапуска;
      - Включить перетаскивание мышью;
      - Включить анимацию затухания;
      - Пауза автозапуска при наведении;
      - Скорость анимации перелистывания;
      - Зацикливание слайдера, дает возможность беспрерывной прокрутки;
      - Lazyload;
      - Возможность задавать стрелки для слайдера;
      - Возможность задать/затемнить задний фон для слайдера;
      - Возможность частичного показа следующего слайдера;
      - Возможность задать с какого слайдера начать показ;
      6) В админке слайдера возможность копировать уже созданные слайды, то есть не надо долго прописывать настройки;
      7) Возможность задавать разные фото или видео для разных расширений;
      8) Модуль использует touch. То есть возможность перетаскивание касанием(сенсорное касание) и его контроль;
      9) Удобный выбор цветовой палитры или возможность задать своей цветовой код(RGBA).
       
      Данный модуль возможно выводить в разной части сайта.
      Модуль не заменяет никаких файлов, только модификатор, который добавляет свои настройки для сайта, что бы возможно было работать с видео и svg;
      Так же все настройки можно менять на уровне кода под себя, если вы разработчик.
       
      Проблемы и исправление модуля:
      1. Я установил модуль и не могу загрузить видео или svg - такое обычно случается, когда модификатор который идет в комплекте с модулем не находит совпадения в файлов системе вашего сайта и из-за этого модуль не срабатывает. Такое случается если вы на своем сайте редактировали файлы, к которым обращались модификаторы.
      2. Я установил модуль, но у меня появились ошибки или не работает загрузка изображений или же сам сайт после установки выбил ошибку - такая ошибка относится к 1 пункту, описанного сверху. То есть при установке модуля, модификатор, мог не правильно прописать свои настройки из-за того что файлы к которому он обращается правились. Это не страшно и можно легко исправить;
      -- Все это можно исправить, написав автору или если вы сами разбираетесь в работе модулей и модификаторов.
       
      Примечание.
      - После загрузки на видео не отображается изображение, потому не стоит пугаться.
      - Для корректного отображения видео на слайдере стоит использовать 2 формата видео, это mp4 и webm. Поскольку если загрузить одно из расширений, в каком-то браузере видео может не заработать.
      - После того как в модуле вы выбираете видео, и ничего не отображается, не стоит пугаться. После сохранения модуля, на слайдах покажет выбранное видео его названием.
      - Если у вас на сайте уже есть возможность загружать видео или svg. То в таком случае, напишите автору и он выдаст модификатор под ваш сайт.
      - Если же у вас сайт поддерживает и видео и svg, то после установки модуля, удалите модификатор данного модуля и обновите модификаторы.
       
      Если вы заметите какие-то неполадки или у вас будет предложение по улучшению самого модуля или вам нужно доработать модуль для личных целей, пишите в личное сообщение данного сервиса, после чего я вам обязательно отвечу.
       
      Будьте внимательные к описанию данного модуля, его характеристикам и скринам приложенным к нему перед приобретением модулям. Если же вам что-то не понятно или есть вопросы перед приобретением, можете написать автору модуля и уточнить свои вопросы к данному модулю
       
       
       
      Другие модули автора:
      Sunser Callback - форма обратной связи
      Ease description - модуль упрощенного описания
      Sunser map - кастомная карта для сайта
      Content manager – модуль учета контента.
      Subscribe_pro - улучшенная подписка на новости
      Sitemap generator - генератор статической карты сайта
    • By Sunser
      450.00 руб
      Скачать/Купить дополнение


      Smart slider - улучшенный слайдер для сайта
      Smart slider  - улучшенный слайдер для сайта
       
      Расширение подходит и тестировалось на версиях Opencart 2.0, 2.1, 2.2, 2.3 и 3.0
      Расширение подходит и тестировалось на версиях ocStore 2.1, 2.3 и 3.0
      Данные версии CMS брались с официальных сайтов OpenCart и ocStore.
       
      Smart slider - это модуль для создания и вывода слайдера на сайте. Данный модуль создан и работает на основе популярного слайдера Slick Slider.
      Данный модуль имеет очень большой функционал и расширенные возможности для возможных доработок по своему желанию.
       
      -- Установка расширения:
      1) Зайдите в свой установщик модификаторов, в админ панели, выберите модуль нужной версии, после чего установите;
      2) После установки зайдите в модификаторы и обновите свои модификаторы;
      3) После этого зайдите в модули или расширения и выберите сам модуль и настройте его;
      4) После настройки модуля зайдите в раздел "Дизайн >> Макеты" и выберите страницу и место где вы хотите вывести модуль.
       
      -- Что может модуль:
      1) Модуль мультиязычный, потому подстраивается под версию языка и его настройки тоже;
      2) Модуль адаптивен, в настройках можно указывать отдельно адаптив под мобильную версию;
      3) В модуле возможно загружать видео;
      4) После установки модуля на сайте будет возможность загружать на сайт видео в формате mp4 и webm и svg иконки;
      5) Основные настройки слайдера/возможности:
      - Показывать стрелки на ПК;
      - Показывать стрелки на Телефоне;
      - Показывать навигацию на ПК(точки/dots);
      - Показывать навигацию на Телефоне(точки/dots);
      - Автовоспроизведение;
      - Скорость автозапуска;
      - Включить перетаскивание мышью;
      - Включить анимацию затухания;
      - Пауза автозапуска при наведении;
      - Скорость анимации перелистывания;
      - Зацикливание слайдера, дает возможность беспрерывной прокрутки;
      - Lazyload;
      - Возможность задавать стрелки для слайдера;
      - Возможность задать/затемнить задний фон для слайдера;
      - Возможность частичного показа следующего слайдера;
      - Возможность задать с какого слайдера начать показ;
      6) В админке слайдера возможность копировать уже созданные слайды, то есть не надо долго прописывать настройки;
      7) Возможность задавать разные фото или видео для разных расширений;
      8) Модуль использует touch. То есть возможность перетаскивание касанием(сенсорное касание) и его контроль;
      9) Удобный выбор цветовой палитры или возможность задать своей цветовой код(RGBA).
       
      Данный модуль возможно выводить в разной части сайта.
      Модуль не заменяет никаких файлов, только модификатор, который добавляет свои настройки для сайта, что бы возможно было работать с видео и svg;
      Так же все настройки можно менять на уровне кода под себя, если вы разработчик.
       
      Проблемы и исправление модуля:
      1. Я установил модуль и не могу загрузить видео или svg - такое обычно случается, когда модификатор который идет в комплекте с модулем не находит совпадения в файлов системе вашего сайта и из-за этого модуль не срабатывает. Такое случается если вы на своем сайте редактировали файлы, к которым обращались модификаторы.
      2. Я установил модуль, но у меня появились ошибки или не работает загрузка изображений или же сам сайт после установки выбил ошибку - такая ошибка относится к 1 пункту, описанного сверху. То есть при установке модуля, модификатор, мог не правильно прописать свои настройки из-за того что файлы к которому он обращается правились. Это не страшно и можно легко исправить;
      -- Все это можно исправить, написав автору или если вы сами разбираетесь в работе модулей и модификаторов.
       
      Примечание.
      - После загрузки на видео не отображается изображение, потому не стоит пугаться.
      - Для корректного отображения видео на слайдере стоит использовать 2 формата видео, это mp4 и webm. Поскольку если загрузить одно из расширений, в каком-то браузере видео может не заработать.
      - После того как в модуле вы выбираете видео, и ничего не отображается, не стоит пугаться. После сохранения модуля, на слайдах покажет выбранное видео его названием.
      - Если у вас на сайте уже есть возможность загружать видео или svg. То в таком случае, напишите автору и он выдаст модификатор под ваш сайт.
      - Если же у вас сайт поддерживает и видео и svg, то после установки модуля, удалите модификатор данного модуля и обновите модификаторы.
       
      Если вы заметите какие-то неполадки или у вас будет предложение по улучшению самого модуля или вам нужно доработать модуль для личных целей, пишите в личное сообщение данного сервиса, после чего я вам обязательно отвечу.
       
      Будьте внимательные к описанию данного модуля, его характеристикам и скринам приложенным к нему перед приобретением модулям. Если же вам что-то не понятно или есть вопросы перед приобретением, можете написать автору модуля и уточнить свои вопросы к данному модулю
       
       
       
      Другие модули автора:
      Sunser Callback - форма обратной связи
      Ease description - модуль упрощенного описания
      Sunser map - кастомная карта для сайта
      Content manager – модуль учета контента.
      Subscribe_pro - улучшенная подписка на новости
      Sitemap generator - генератор статической карты сайта
      Добавил Sunser Добавлено 07.10.2020 Категория Слайдшоу, баннеры, галереи Системные требования php версии 5.6, желательно 7.0 и высше Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3 Обращение к серверу разработчика Нет Старая цена 450  
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.