[Modx Evo] Слайд-шоу на ModX с прокруткой и описанием

1) Скачиваем архив

2) Создаем Шаблон с названием Lilo

3) Создаем TV:

• Элементы → Управление элементами → Параметры (TV) создать новый по имени img-news,
• Описание: Изображение для ресурса. Размер — 380px на 250px. 
• Заголовок: Изображение для страницы
• Тип параметра и визуальный компонент: image
• Ставим галочку отображения на шаблоне Lilo

4) Создаем контейнер в древе ресурсов (запоминаем его ID, оно в скобочках около названия), внутри него создаем ресурсы (эти ресурсы будут выводиться в слайдере) и присваиваем этим ресурсам шаблон Lilo

 5) Создаем чанк GALLERY (название), вставляем в Содержание код:

<div class="wrapper col2">
<div id="featured_slide">
<div id="featured_content">
<ul>
[[Ditto? &tpl=`slide-tpl` &startID=`4` &sortDir=`ASC` ]]
</ul>
</div>
<a href="javascript:void(0);" id="featured-item-prev"><img src="/assets/templates/1210/images/prev.png" alt="" /></a>
<a href="javascript:void(0);" id="featured-item-next"><img src="/assets/templates/1210/images/next.png" alt="" /></a>
</div>
</div>

где &startID=`4` это номер id контейнера (в древе ресурса), где мы создали ресурсы, которые будут выводиться в слайд-шоу 

/assets/templates/1210/images/prev.png и /assets/templates/1210/images/next.png  - адреса картинок стрелочек (здесь указываете свои адресса, до картинок)

 Создаем чанк slide-tpl

<li>[+img-news+]
<div class="floater">
<h2>[+longtitle+]</h2>
<p>[+introtext+]</p>
<p class="readmore"><a href="[~[+id+]~]" title="Читать подробнее об этой услуге">Подробнее &raquo;</a></p>
</div>
</li>

В шаблон отображения страницы с слайд-шоу (обычно то шаблон - Главная) подгружаем скрипты, стили из архива и вставляем :

<script type="text/javascript"> //<![CDATA[ !window.jQuery && document.write('<script type="text/javascript" src="assets/templates/1210/scripts/jquery-1.4.4.min.js" <\/script>'); //]]> </script>
<script src="assets/templates/1210/scripts/jquery.jcarousel.pack.js"></script>
<script src="assets/templates/1210/scripts/jquery.jcarousel.setup.js"></script>
<link type="text/css" rel="stylesheet" href="assets/templates/1210/scripts/featured_slide.css" />
<script type="text/javascript">
$(document).ready(function() {
jQuery.easing.def = "easeOutExpo";
}); </script>

В папку assets/templates/1210/scripts кидаем скрипты из архива (jquery.jcarousel.setup.js и jquery.jcarousel.pack.js)

Скрипт assets/templates/1210/scripts/jquery-1.4.4.min.js МОДх сам подключит.

Стили assets/templates/1210/scripts/featured_slide.css тоже кидаем в папку

Все.