В одной из наших предыдущих статей, мы узнали с Вами как вывести артикул в карточке товара Opencart2x.
В этой статье, я расскажу Вам как настроить стандартный слайдер который выводится на главной странице Opencart 2x!
Как и в предыдущих статьях все манипуляции я буду показывать на примере сборки ocStore версии 2.3. Расположение исходных файлов для других версий может немного отличаться.
Из этой статьи Вы узнаете как:
- Как изменить скорость смены слайдов;
- Как отключить кнопки навигации и пагинации;
- Как остановить слайдшоу при наведении мыши;
- Как задать свой текст для кнопок навигации;
1 Шаг. Подключаемся к нашему FTP серверу с помощью программы FileZilla.
Данные для доступа к вашему FTP серверу уточняйте у Вашего хостинга.
2 Шаг. Открываем файл модуля слайдера slideshow.tpl
Во избежание ошибок, открывать файл стоит только с помощью специального текстового редактора NotePad++, не используйте стандартный блокнот!
Важно! Перед началом редактирования обязательно скачайте копию файла slideshow.tpl себе на компьютер или сделайте полный бэкап на вашем хостинге.
Файл находится по пути catalog/view/theme/default/template/extension/module/slideshow.tpl
3 Шаг. Изменяем стандартные настройки слайдера
По умолчанию в файл слайдшоу выглядит следующим образом, но нас будет интересовать только блок выделенный красным.
Итак давайте разберём за что отвечают имеющиеся настройки и как мы можем их изменить.
items: 6, — Эта переменная позволяет установить максимальное количество видимых элементов (слайдов) в браузере с шириной более 1199px;
autoPlay: 3000, — Эта переменная задаёт скорость смены слайдшоу, по умолчанию она составляет 3 секунды (значение указано в миллисекундах), если вы хотите увеличить скорость например до 5 секунд, то вместо 3000 нужно указать значение 5000.
singleItem: true, — Эта переменная имеет всего 2 значения true и false. Если задать значение false то все наши слайды будут выводится в одну строку вот так:
navigation: true, — Эта переменная позволяет скрывать/отображать навигационные стрелки Prev (Назад) и Next (Вперёд) и так же как и предыдущая имеет всего 2 значения true или false.
pagination: true, — Эта переменная позволяет скрывать/отображать кнопки пагинации и так же как и предыдущая имеет всего 2 значения true или false.
navigationText: [‘<i class=»fa fa-chevron-left fa-5x»></i>’, ‘<i class=»fa fa-chevron-right fa-5x»></i>’], — Эта переменная позволяет назначить свой собственный текст для навигации. Чтобы получить пустые кнопки используйте navigationText : false .
Также можно использовать HTML код, например мы можем сменить иконки стрелок на любые другие, взяв нужный шорт код с сайта Font Awesome с поисковым запросом arrow или chevron.
Затем просто копируем код для левой стрелки fa fa-arrow-circle-left и вставляем его вместо стандартного fa fa-chevron-left, аналогично проделываем и для правой стрелки с другим кодом чтобы получилось вот так:
navigationText: ['<i class="fa fa-arrow-circle-left fa-5x"></i>', '<i class="fa fa-arrow-circle-right fa-5x"></i>'],
И получаем вот такую красоту )
Так же с помощью переменной navigationText: мы можем задать любой текст для кнопок навигации.
Например если прописать код вот так: navigationText: [«Назад»,»Вперёд»],
То получим вот такой результат:
А теперь я вам расскажу как настроить слайдшоу чтобы оно останавливалось при наведении курсора мыши на текущий слайд.
Сделать это очень просто, достаточно дописать следующий код:
stopOnHover: True, — следующей строкой после pagination: true,
4 Шаг. Сохраняем и проверяем
После редактирования файла slideshow.tpl сохраните изменения и загрузите их на сервер.
Затем перейдите в ваш браузер и проверьте изменения нажав комбинацию клавиш CTRL+F5.
Если изменений нет, попробуйте перейти в раздел Менеджера дополнений в админке и нажмите кнопку Обновления кэша.
Всё должно заработать! На этом у меня всё.
Ну а если Вам захочется поэкспериментировать, то Вам табличка со многими другими параметрами которые Вы можете дополнительно указать для вашего слайдшоу!
Ниже приведены все опции доступные для настройки плагина jQuery Owl Carousel.
| Наименование | По умолчанию | Тип | Описание |
|---|---|---|---|
items |
5 | int | Эта переменная позволяет установить максимальное количество видимых элементов (слайдов) в браузере с шириной более 1199px |
itemsDesktop |
[1199,4] | array | Позволяет установить число видимых слайдов в зависимости от ширины браузера. Формат [x,y], где x = ширина браузера и y = число видимых слайдов. Например, [1199,4]означает, что если (окно <= 1199) { показывать на странице 4 слайда }. Также можно использовать itemsDesktop: false, чтобы отменить эти установки. |
itemsDesktopSmall |
[979,3] | array | См. выше. |
itemsTablet |
[768,2] | array | См. выше. |
itemsTabletSmall |
false | array | См. выше. По умолчанию отключено. |
itemsMobile |
[479,1] | array | См. выше. |
itemsCustom |
false | array | Эта опция позволят установить собственные варианты в зависимости от ширины браузера. Если опция стоит, то itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobileи др отключены. Например: [[0, 2], [400, 4], [700, 6], [1000, 8], [1200, 10], [1600, 16]]. |
singleItem |
false | boolean | Отображает только один элемент. |
itemsScaleUp |
false | boolean | Опция запрещает растягивание, если количество элементов (слайдов) меньше, чем объявлено. Чтобы включить растягивание элементов установить true. |
slideSpeed |
200 | int | Скорость смены слайдов в мс. |
paginationSpeed |
800 | int | Скорость пагинации в мс. |
rewindSpeed |
1000 | int | Скорость перемотки в мс. |
autoPlay |
Измените на любой числовое значение, например, autoPlay: 5000 и пойдет прокрутка каждые 5 секунд. Если вы поставите true, по умолчанию скорость будет равна 5 секундам. |
||
stopOnHover |
false | boolean | Остановить прокрутку при наведении мышки. |
navigation |
false | boolean | Отображать кнопки “next” и “prev” |
navigationText |
[«prev»,»next»] | array | Вы можете назначить свой собственный текст для навигации. Чтобы получить пустые кнопки используйте navigationText : false. Также можно использовать HTML. |
rewindNav |
true | true | Переход к первому слайду (при достижении последнего). Используйте rewindSpeed, чтобы изменить скорость анимации. |
scrollPerPage |
false | boolean | Вместо перехода по элементам срабатывает скролл. Оказывает влияние на кнопки next/prev и при клике/касании. |
pagination |
true | boolean | Показываем пагинацию. |
paginationNumbers |
false | boolean | Показываем цифры вместо кнопок пагинации. |
responsive |
true | boolean | Вы можете использовать Owl Carousel лишь для десктопных сайтов. Чтобы отключить “отзывчивость” поставьте false. |
responsiveRefreshRate |
200 | int | Проверяет изменение ширины окна каждые 200мс для “отзывчивых” действий. |
responsiveBaseWidth |
window | селектор jQuery | OwlCarousel проверяет window для отслеживания изменений ширины браузера. Вы можете проверять изменения ширины у любого другого элемента jQuery, например, у “.owl-demo”. |
baseClass |
«owl-carousel» | string | Автоматически добавляет класс для базовых стилей плагина OwlCarousel. Лучше не изменять без крайней необходимости. |
theme |
«owl-theme» | string | Стили CSS плагина owl по умолчанию для кнопок и навигации. Изменить этот параметр, чтобы определить свою собственную тему. |
lazyLoad |
false | boolean | Задержка при загрузке изображений. Изображения за пределами области просмотра не будут загружены, пока пользователь не перейдет (проскроллит) непосредственно к самим изображениям. Замечательно подходит для мобильных устройств, увеличивая скорость загрузки страницы. IMG потребуется специальная разметка class=’lazyOwl’ и data-src=’your img path’. |
lazyFollow |
true | boolean | Когда используется пагинация пропускается загрузка изображений у страниц, которые были пропущены. Только загруженные изображения будут показаны в области просмотра. Если установлено в false все изображения загрузятся, когда используется пагинация. Это надстройка к lazy load функции. |
lazyEffect |
«fade» | boolean / string | По умолчанию стоит fadeIn с 400мс. Используйте false, чтобы отменить этот эффект. |
autoHeight |
false | boolean | Добавляет высоту к owl-wrapper-outer, таким образом вы можете использовать различную высоту у слайдов. Используйте опцию только в том случае, если на странице один слайд. |
jsonPath |
false | string | Позволяет вам загрузить непосредственно из json-файла. Ваша json-структура должна соответствовать owl json-структуре. |
jsonSuccess |
false | function | Это ф-я, вызываемая после ответа сервера для $.getJSON, построенная в плагине carousel. |
dragBeforeAnimFinish |
true | boolean | |
mouseDrag |
true | boolean | Переключить вкл/откл события мышки. |
touchDrag |
true | boolean | Переключить вкл/откл события касания. |
addClassActive |
false | boolean | Добавляем класс ‘active’ видимым элементам. Работает с любым количеством элементов на экране. |
transitionStyle |
false | string | Добаляет CSS3 transition стили (перехода). Работаем только с одним элементом на экране. |
Понравилась статья? Поставьте лайк, и напишите Ваш комментарий!
Так же делитесь статьёй со своими друзьями и знакомыми в социальных сетях!
Остались вопросы? Задайте их в комментариях, и я обязательно отвечу.
Хотите узнать больше об OpenCart? Подписывайтесь на мой Youtube канал!
После внесения изменений в файл и его сохранения через Filezilla выдает ошибку:
Ошибка: /var/www/html/site.ua/public_html/catalog/view/theme/default/template/extension/module/slideshow.tpl: open for write: permission denied
Ошибка: Передача файла потерпела неудачу