OpenCart — карусель производителей opencart — автопрокрутка
Конечно, немного несправедливо модуль карусели OpenCart называть «каруселью производителей», ведь с помощью этого модуля можно вывести не только логотипы производителей, но и избранные товары, лишний раз разрекламировать категории товаров, дать ссылки на магазины-партнеры и т.д. В общем, с помощью карусели можно много чего сказать и показать покупателю, но так уж повелось, что большая часть магазинов использует карусель именно для вывода логотипов производителей или брендов.
Итак, с сутью карусели порядок, но вот с ее «спокойным состоянием» не все так гладко. По умолчанию, карусель OpenCart не имеет автоматической прокрутки (скроллинга), для того, чтобы просмотреть все изображения карусели, необходимо кликать на стрелочку(и). Кстати, изначально видна только одна стрелочка, та что справа, так как влево крутить пока что нечего — не самая красивая картина получается.
Для того, чтобы при загрузке магазина сразу были видны обе стрелочки, изображения прокручивались автоматически и появилась цикличность, при которой изображения, дойдя до конца карусели, не останавливались, а начинали свой показ по новой, внесем небольшое изменение в catalog/view/theme/default/template/module/carousel.tpl. Открываем файл и вместо
|
1 2 3 4 5 6 7 |
<script type="text/javascript"><!-- $('#carousel<?php echo $module; ?> ul').jcarousel({ vertical: false, visible: <?php echo $limit; ?>, scroll: <?php echo $scroll; ?> }); //--></script> |
размещаем
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"><!-- $('#carousel<?php echo $module; ?> ul').jcarousel({ vertical: false, auto: 4, wrap: 'circular', visible: <?php echo $limit; ?>, scroll: <?php echo $scroll; ?> }); //--></script> |
Мы добавили всего две строки, в которых auto задает скорость прокрутки изображений, а wrap — цикличность, чтобы дойдя до последнего изображения, карусель не останавливалась, а продолжала свое вращение. Теперь карусель вращается как по клику, так и самостоятельно и у нее теперь почти полноценный вид с двумя стрелочками (дизайн которых обязательно стоит сменить:) ).
Спасибо Юля)
Сделать несложно, а вид намного лучше и да, кнопочки сразу менять надо.
зы только category.tpl поменять на carousel.tpl.
Вячеслав, большое спасибо, что заметили и сообщили об ошибке — думала об одном, написала — другое)
Подскажите пожалуйста, где меняется ширина между картинками в карусели ? Я использовал ее для прокрутки доп. изображений в карточке товара и не могу найти где настроить ширину.
А вот можно изменить порядок картинок в карусели? Потому как в админке картинки выставлены в одном порядке, а отображаются в другом и не понятно по какому принципу :(
Добрый день, Сергей,
если не разобрались с порядком вывода изображений, можете посмотреть этот пост о сортировке изображений в баннерах.
Здравствуйте. Подскажите, пожалуйста, как сделать карусель изображений в карточке товара, чтобы главное изображение переключалось одновременно с миниатюрой, примерно, как здесь: https://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.html. Тут дается сам слайдер: https://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/#comment-1423, но я никак не могу сообразить, каким образом прикрутить его к карточке товара.
Здравствуйте,
уточните, Вам главное сделать «чтобы главное изображение переключалось одновременно с миниатюрой» или встроить этот слайдер в карточку товара?
Если речь идет о первом, то могу предложить модуль, а если о втором, то помочь так, чтобы все работало из админки, не смогу.
Спасибо Вам за ответ. Совсем необязательно, чтобы из админки все работало. Главное, чтобы на странице товара листались или переключались дополнительные изображения товара при этом изменяя, соответствующее им главное изображение.
Добрый день, Эдуард,
можете посмотреть этот модуль, может, он Вам подойдет. Дополнительное изображение товара, при клике по нему, будет появляться на месте основного изображения.
Если же есть надобность реализовать изображения именно в виде карусели, то на странице этого модуля автор дает ссылку на модуль, позволяющий дополнительные изображения выводить в карусели.
Юлия, спасибо. Такой модуль у меня есть. И карусель дополнительных изображений тоже есть. Мне нужно чтобы карусель была с участием главного изображения, но что-то нигде не могу найти ни плагина, ни даже описания, как это можно сделать.
К сожалению, я, видимо, не могу понять задачу, которую Вы хотите решить.
Юлия, здравствуйте. В упрощенном варианте, мне нужно сделать, как здесь: https://bestreg5.com/item/171-videoregistrator-siemiss-sd-g910, а в идеале, хотелось бы, чтобы превьюшки прокручивались и вместе с этой прокруткой менялось изображение в главном окне.
У меня такая же проблема, не могу изменить порядок вывода картинок в карусели. Они задаются рэндомом, а мне нужен порядок. Как это сделать?
Здравствуйте, Виктор,
если не разобрались с порядком вывода изображений, можете посмотреть этот пост о сортировке изображений в баннерах.
У меня не получилось сделать, как описано выше. Сделала все по инструкции, а карусель развернулась вертикально и не прокручивается. В чем может быть проблема?
Юлия, здравствуйте!
Заранее извиняюсь, пишу в чуть не соответствующую тему, не знал куда писать..
Я не могу разобраться со следующей страницей: Производители (Бренды) -> нужный бренд -> … В результате попадаем на страницу с товарами выбранного бренда. На ней присутствуют те же модули (баннеры, карусели, рекомендуемые), что и на главной странице. Не могу понять где их можно отключить, в админке подобного макета я не нашел..
заранее премного благодарен :)
За станицу определенного производителя отвечает схема «Manufacturer».
Все разобрался :) но получается не совсем так как вы говорите.. если я редактирую схему Manufacturer — я правлю страницу содержащей список брендов (производителей) в алфавитном порядке. Непосредственно страницы, как Вы сказали определенного производителя, у меня по какой-то причине не было. Сам файл в шаблоне был (manufacturer_info), а схемы для него нет.. создал новую схему, задал содержание, все работает. Спасибо большое за помощь)
Главное, что разобрались!)
Михаил, если вы тут ещё бываете, подскажите как решить данную проблему что была у вас, у меня то же самое (я начинаю только в этом всё разбираться и многое не понимаю)…очень нужна ваша помощь! Заранее спасибо!
Сделал как написано. Но скорость прокрутки слишком быстрая, а от изменения цифры в строке auto ничего не меняется…
Здравствуйте Юля!
Отличный сайт много полезной информации!
Касательно данной статьи — скроллинг это конечно круто, но никогда не понимал в чем смысл данного модуля, если нельзя кликнуть по логотипу и перейти на страницы бренда?
Было бы замечательно, если бы в одной из своих следующих статей Вы рассказали как можно это реализовать ))
Здравствуйте, Роман,
на самом деле, статья для этого не требуется. При создании очередного баннера всегда предоставляется поле «Ссылка», задавайте изображению производителя соответствующую ссылку и при клике на это изображение в карусели будет осуществляться переход на нужную страницу.
Ого!
А я и не знал.
На большинстве демо сайтов это просто картинки без ссылок, а оказывается есть такая возможность.
Спасибо )))
Не за что)
Многие ищут какие-то модули для того, чтобы сделать карусель с автопрокруткой, а на самом деле достаточно только немного отредактировать файл стандартной карусели, и необходимый эффект будет достигнут.
Подскажите как сделать чтоб вращение карусели по кругу было плавным без рывков. Спасибо Аркадий.
Добрый день. Как сделать вращение карусели плавным без рывков на сайте опенкарт.