В одной из наших предыдущих статей, мы узнали с Вами как вывести артикул в карточке товара 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.
Если изменений нет, попробуйте перейти в раздел Менеджера дополнений в админке и нажмите кнопку Обновления кэша.
Всё должно заработать! На этом у меня всё.
Ну а если Вам захочется поэкспериментировать, то Вам статья со многими другими параметрами которые Вы можете дополнительно указать для вашего слайдшоу!
Понравилась статья? Поставьте лайк, и напишите Ваш комментарий!
Так же делитесь статьёй со своими друзьями и знакомыми в соц. сетях!
Остались вопросы? Задайте их в комментариях, и я обязательно отвечу.
