Для начала установим плагин слайдера.
В свой проект, в папку CSS скачиваем и помещаем файлы:
В папку JS кладем:
Для подключения этой библиотеки добавляем в наш HTML код:
В начало HTML в раздел Head
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.css">
В конец HTML в раздел Script
<script src="assets/js/owl.carousel.js"></script>
Так же в скриптах делаем базовые настройки для каруселей. Ниже представлен пример.
Для примера
<script src="assets/js/owl.carousel.js"></script>
<script>
$(document).ready(function(){
$('#carousel-one').owlCarousel({
loop: false,
autoplay: false,
//autoplayTimeout: 7000,
//smartSpeed: 2000,
margin: 0,
nav: true,
dots: false,
navText: ["<img class='arrow' src='assets/images/arrow.png'>", "<img class='arrow' src='assets/images/arrow.png'>"],
responsive:{
0:{
items:1
},
400:{
items:1
},
576:{
items:2
},
768:{
items:2
},
1200:{
items:2
}
}
});
});
</script>
Теперь блоку, в котором должна быть карусель присваиваем id="carousel-one" и добавляем ему классы "owl-carousel owl-theme". Верстка и стили для этого блока уже должны быть написаны.
Вот так
<div class="container-006">
<div class="container-006-content">
<div class="container-006__titleblock">
<p class="container-006__titleblock-maintext">НОВОСТИ</p>
<p class="container-006__titleblock-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo dolore veritatis eum iusto obcaecati voluptates sequi illo rem tempore.</p>
<a class="container-006__titleblock-link" href="">ВСЕ НОВОСТИ</a>
</div>
<div class="container-006__newsblock">
<div id="carousel-one" class="container-006__newsblock-items owl-carousel owl-theme">
ЗДЕСЬ БУДУТ ЭЛЕМЕНТЫ СЛАЙДЕРА
</div>
</div>
<div class="container-006__arrowblock">
</div>
</div>
</div>
Каждому элементу карусели для центрирования по горизонтали нужно поставить "margin: auto;".
Например вот так
.container-001__downblock-items {
display: flex;
justify-content: space-around;}
.container-001__downblock-items-itm {
width: 300px;
background-color: #ffffffb3;
padding: 20px;
border: 2px solid #ffffff;
margin: auto;}
В админке ModX, в ресурсах создаем ресурс "Новости" с опцией "Контейнер", внутри этого ресурса создаем страницы новостей. Желательно для них создать свои TV переменные и привязать к шаблону какой ни будь внутренней страницы, для того, что бы при щелчке по элементу слайдера, у нас открывалась новость.
Создадим чанк для нашего элемента.
news_on_main_tpl (символ "((" заменяем на две квадратные скобки)
<div class="container-006__newsblock-items-itm">
<div class="container-006__newsblock-items-itm-title">
<div class="container-006__newsblock-items-itm-title-image">
<img class="container-006__newsblock-items-itm-title-image-img" src="((+tv.news_image))" alt="">
</div>
<div class="container-006__newsblock-items-itm-title-text">
<p class="container-006__newsblock-items-itm-title-text-date">((+tv.news_date))</p>
<a class="container-006__newsblock-items-itm-title-text-link" href="((~((+id))))">
<p class="container-006__newsblock-items-itm-title-text-txt">((+longtitle))</p>
</a>
</div>
</div>
<div class="container-006__newsblock-items-itm-content">
<p class="container-006__newsblock-items-itm-content-txt">((+introtext))</p>
</div>
</div>
Теперь там, где нам нужно вывести блок новостей со слайдером внутри размещаем код "pdoResources".
Код (символ "((" заменяем на две квадратные скобки)
<div class="container-006">
<div class="container-006-content">
<div class="container-006__titleblock">
<p class="container-006__titleblock-maintext">НОВОСТИ</p>
<p class="container-006__titleblock-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo dolore veritatis eum iusto obcaecati voluptates sequi illo rem tempore.</p>
<a class="container-006__titleblock-link" href="">ВСЕ НОВОСТИ</a>
</div>
<div class="container-006__newsblock">
<div id="carousel-one" class="container-006__newsblock-items owl-carousel owl-theme">
((!pdoResources?
&parents=`361`
&depth=`0`
&limit=`5`
&sortby=``
&includeTVs=`news_image, news_date`
&tpl=`news_on_main_tpl`))
</div>
</div>
<div class="container-006__arrowblock">
</div>
</div>
</div>
На всякий случай приведу css которые использовались в этом проекте. Адаптив для этого блока не привожу в примере.
CSS
.container-006 {
background-color: #e8ede7;}
.container-006-content {
background-color: #e8ede7;
width: 1200px;
margin: auto;
display: flex;
padding: 55px 10px 55px 10px;
justify-content: space-between;}
.container-006__titleblock {
width: 25%;
display: flex;
flex-direction: column;}
.container-006__titleblock p.container-006__titleblock-maintext {
margin: 0 0 30px 0;
font-family: AGForeignerBlackС;
font-size: 25px;
font-weight: 900;
line-height: 1;
color: #000000;}
.container-006__titleblock p.container-006__titleblock-text {
margin: 0;
font-family: Arial;
font-size: 17px;
line-height: 1;
color: #000000;}
.container-006__titleblock a.container-006__titleblock-link {
margin: 50px 0 0 0;
font-family: Arial;
font-size: 17px;
line-height: 1;
color: #000000;}
.container-006__titleblock a.container-006__titleblock-link:hover {
color: #0f9c3e;}
.container-006__newsblock {
position: relative;
width: 70%;}
.container-006__newsblock-items {
display: flex;
justify-content: space-around;}
.container-006__newsblock-items-itm {
margin: auto;
padding: 10px;
width: 380px;
background-color: #ffffff;
display: flex;
flex-direction: column;
border: 3px solid #0f9c3e;}
.container-006__newsblock-items-itm-title {
display: flex;}
.container-006__newsblock-items-itm-title-image {
margin: 0 10px 0 0;}
.container-006__newsblock-items-itm-title-image img.container-006__newsblock-items-itm-title-image-img {
margin: 0 10px 0 0;
width: 130px!important;
height: auto;}
.container-006__newsblock-items-itm-title-text {
width: -webkit-fill-available;}
.container-006__newsblock-items-itm-title-text p.container-006__newsblock-items-itm-title-text-date {
margin: 0;
font-size: 15px;
text-align: right;}
.container-006__newsblock-items-itm-title-text a.container-006__newsblock-items-itm-title-text-link {
color: #000000;}
.container-006__newsblock-items-itm-title-text a.container-006__newsblock-items-itm-title-text-link:hover {
color: #0f9c3e;}
.container-006__newsblock-items-itm-title-text p.container-006__newsblock-items-itm-title-text-txt {
margin: 20px 0;
font-size: 15px;
line-height: 1;
text-align: left;}
.container-006__newsblock-items-itm-content p.container-006__newsblock-items-itm-content-txt {
margin: 0;
line-height: 1;}
.container-006__arrowblock {
width: 5%;}
#carousel-one div.owl-nav {
position: absolute;
right: -60px;
top: 43%;
margin-top: 0;
text-align: end;
-webkit-tap-highlight-color: transparent;}
#carousel-one div.owl-nav button.owl-prev {
display: none;
outline: none;}
#carousel-one div.owl-nav button.owl-next {
outline: none;}
#carousel-one div.owl-nav button.owl-next:hover {
background: transparent;
outline: none;
text-decoration: none;}
#carousel-one .owl-nav img.arrow {
width: 50px;
height: auto;}
#carousel-one .owl-nav img.arrow:hover {
filter: drop-shadow(0px 0px 3px black);}