Любой разработчик рано или поздно осознает, что его не устраивает функционал готовых модулей для тех или иных компонентов Joomla создающих эффект карусели товаров, новостей или иного контента. 

Рассмотрим несложное подключение плагина Owl Carousel 2 к сайту на Joomla 3 или любой другой CMS (установка практически для всех идентична).

Для этого нам потребуется подключение внешних CSS и JS скриптов или скачивание и подключение к шаблону этих скриптов на вашем сервере (рекомендуется).

CSS – подключаем файлы стилей для карусели Owl Carousel 2

Подключаем в хедере, в примере абсолютные пути на CDN, но лучше подключать стили и скрипты со своего сайта.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

JS – подключаем необходимые скрипты для Owl Carousel 2

Подключаем в футере jQuery, библиотеку OwlCarousel2 и свой файл скриптов, в котором настраиваем слайдер.
Здесь указаны абсолютные ссылки на CDN, но лучше подключать все стили и скрипты со своего сайта, предварительно скачав все файлы.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="/js/script.js"></script>

HTML – HTML-код самой карусели Owl Carousel 2

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

<div class="owl-carousel">
  <div> Slide 1 </div>
  <div> Slide 2 </div>
  <div> Slide 3 </div>
  <div> Slide 4 </div>
  <div> Slide 5 </div>
  <div> Slide 6 </div>
  <div> Slide 7 </div>
</div>

Чтобы использовать базовые стили для навигации из файла owl.theme.default.min.css, необходимо добавить класс owl-theme к контейнеру карусели:

<div class="owl-carousel owl-theme"> 

Можно вынести стрелки навигации за контейнер карусели, данный код добавляем после инициализации карусели:

$(".next_button").click(function(){
  owl.trigger("next.owl.carousel");
});
 
$(".prev_button").click(function(){
  owl.trigger("prev.owl.carousel");
});

Пример слайдера Owl Carousel 2 с четырьмя слайдами в ряд и адаптивом для мобильных:

Содержимое файла script.js

$('#carusel1').owlCarousel({
  loop: true,
  responsiveClass: true,
  navText: true,
  nav: true,
  responsive: {
    0: {
      items: 2,
    },
    600: {
      items: 3,
    },
    1000: {
      items: 4,
      loop: true
    }
  }

Карусель контента подключена и работает! Осталось прописать стили в Вашем css файле для вложенных DIV блоков и оценить результат. Уже подключенную карусель можно интегрировать как в простые html блоки сайта, так и в любые сторонние компоненты и модули.