Как изменить настройки слайдера в Opencart2x?

В одной из наших предыдущих статей, мы узнали с Вами как вывести артикул в карточке товара 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 Эта опция позволят установить собственные варианты в зависимости от ширины браузера. Если опция стоит, то itemsDeskopitemsDesktopSmallitemsTabletitemsMobileи др отключены. Например: [[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 канал!

Вам так же может понравиться

Об авторе: Admin

4
Оставить комментарий

1 Цепочка комментария
3 Ответы по цепочке
2 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
2 Авторы комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Владимир

После внесения изменений в файл и его сохранения через Filezilla выдает ошибку:
Ошибка: /var/www/html/site.ua/public_html/catalog/view/theme/default/template/extension/module/slideshow.tpl: open for write: permission denied
Ошибка: Передача файла потерпела неудачу