Карусель-новости

Изображения для слайдов карусели берем из соответствующих материалов. Если материал предполагается выводить в модуле карусели, "изображение для вступительного текста" нужно создать соответствующих размеров

Что нужно сделать

Файл default.php

1. Создаем копию файла default.php и переименовываем в carousel.php
2. Поместить код модуля в контейнеры с css-классами Bootstrap
3. Создать уникальный индекс для карусели
4. Создать класс active для активного слайда
5. Добавить кнопки управления вправо-влево

<?php
defined('_JEXEC') or die;
$idMod = 'carousel'.$module->id;
?>
<div id="<?php echo $idMod; ?>" class="carousel slide">
   <div class="carousel-inner">
   <?php
   $i = 0;
 
   foreach ($list as $item) :
//Первый слайд делаем активным
     $activeSlide = '';
     if ($i == 0) {
       $activeSlide = ' active';
     }
//Файл _item.php после редактирования будет сохранен как _item-carousel.php
     require JModuleHelper::getLayoutPath('mod_articles_news', '_item-carousel');
     $i++;
   endforeach;
   ?> 
 </div>
//Кнопки управления карусели вправо-влево
   <a class="left carousel-control" href="#<?php echo $idMod; ?>" 
       data-slide="prev">&amp;lsaquo;</a>
   <a class="right carousel-control" href="#<?php echo $idMod; ?>" 
       data-slide="next">&amp;rsaquo;</a>
</div>

Файл _item.php

1. Создаем копию файла _item.php и переименовываем в _item-carousel.php
2. Поместить код вывода материала в контейнеры с css-классами Bootstrap

<?php
defined('_JEXEC') or die;
$images = json_decode($item->images);
?>
<div class="item<?php echo $activeSlide; ?>">
 
  <img src="<?php echo htmlspecialchars($images->image_intro); ?>" 
      alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" />
 
  <div class="carousel-caption">
    <!-- выводим заголовок -->
    <!-- выводим дату -->
    <!-- выводим текст вступления материала -->
    <!-- выводим кнопку подробнее -->
  </div>
</div>

Как выглядит модуль с использованием альтернативного макета Карусель, можно посмотреть в демо-разделе модуля Mod-Combo-News.

Скачкть файлы примера: carousel.zip