Стандартные модули для главной страницы типа карусели или слайдшоу выглядят безлико и одинаково. Эти модули построены на базе библиотеки owl-carousel, ранее, я уже писал об обновлении этой карусели до более новой версии, в которая предусматривает более широкие настройки отображения и поведения.

В этой статье предлагаю настроить отображение модуля "карусель", изначально он выглядит просто как список картинок с кнопками.

Смотрится это не очень интересно, нужно хотя-бы добавить заголовок к этому блоку и видоизменить кнопки навигации.
Чтобы добавить заголовок, нужно в файлe "catalog/controller/extension/module/carousel.php" после строки
$data['banners'][] = array(
добавить строку
'name' => $result['name'],
В итоге мы получим массив с полями name(заголовок), title(название изображения), link(ссылка), image(изображение).

Теперь нужно сделать вывод поля name в качестве заголовка, заголовка в теге h3. Достаточно взять name первого элемента массива, для этого в файле catalog/view/theme/default/template/extension/module/carousel.tpl нужно добавить строки в самое начало:

<?php 
  reset($banners);
  echo "<h3>".$banners[key($banners)]['name']."</h3>";
?>

Также можно немного украсить заголовки такого типа, сделать его более крупным и голубым, в цвет стандартной темы. В файле catalog\view\theme\default\stylesheet\stylesheet.css у тега h3 заменить стиль на

h3 {
	font-size: x-large;
	font-weight: bold;
	color: #23a1d1;
}

Теперь заголовок выглядит так как нужно.

Осталось сделать навигацию такой как на картинке выше.
Для этого нужно изменить параметры карусели в файле, который редактировали ранее - catalog/view/theme/default/template/extension/module/carousel.tpl, здесь нужно убрать точки и установить навигацию в тег "div", для этого заменяем параметры на эти:

items: 6,
loop: true,
autoplayTimeout: 3000,
smartSpeed: 1000,
nav: true,
dots: false,
navText: ['', ''],
navElement: 'div'

И я добавил класс для контейнера карусели "owl-widenav", заменить строку

Теперь нужно добавить стили к добавленным элементам, в конец файла catalog\view\javascript\jquery\owl-carousel\owl.theme.css

.owl-widenav .owl-nav {
  margin-top: -40px;
  text-align: justify;
  padding-bottom: 40px; }
.owl-widenav .owl-nav div.owl-prev {
  position: relative;
  left: 0px;
  }
.owl-widenav .owl-nav div.owl-next {
  position: absolute;
  right: 0;
}
.owl-widenav .owl-nav [class*='owl-']:hover{
  background: #23a1d1;
}

Теперь все выглядит как и планировалось, заголовок, стрелочки по краям карусели, подсветка навигации при наведении. Выглядит все так как и планировалось изначально, хотя возможностей для дальнейших украшательств еще достаточно.

Скачать готовые файлы к статье можно ЗДЕСЬ