Слайдер на modx revo

Версия MODX: Все

Еще раз всем привет.

Теперь еще нужен совет, подсказка, решение.

На чем лучше будет реализовывать такой вот слайдер на главной странице (скрин)

yadi.sk/i/627k9ymO3TaAqt

Есть может быть у кого то туториал какой? в modx среднячек еще очень.

Константин
20.03.18 в 15:03

Комментарии (4)

Павел Романов 20.03.2018 16:17 #

Найдите скрипт нужного слайдера и реализуйте его в шаблоне.
Вывод кадров можно сделать как угодно — от ресурсов (на pdoResources) до MIGX.

Константин 21.03.2018 14:54 #

Слайдер поставил bxslider, html в шаблоне, а как теперь сделать вывод через pdo?

<ul class="bxslider">
  <li><img src="/images/materials/Foto-14-Shikarnyiy-dereviannyiy-dom-na-ozere-ot-Interernoiy-studii-FullHouseDesign.jpg" title="Аленький цветочек"></li>
  <li><img src="/images/materials/home-automation-increase-value.jpg" title="Аленький цветочек"></li>
  <li><img src="/images/materials/life-is-good.jpg" title="Аленький цветочек"></li>
  <li><img src="/images/materials/z-sPce25WWE.jpg" title="Аленький цветочек"></li>
</ul>

ниже идут превью


<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="http://ваш_сайт/flower-example-10.jpg" /></a>
  <a data-slide-index="1" href=""><img src="http://ваш_сайт/flower-example-9.jpg" /></a>
  <a data-slide-index="2" href=""><img src="http://ваш_сайт/flower-example-3.jpg" /></a>
  <a data-slide-index="3" href=""><img src="http://ваш_сайт/flower-example-5.jpg" /></a>
</div>

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

Комментарий был изменён 21.03.2018 в 15:05

Павел Романов 21.03.2018 15:04 #
Если делаете ресурсами, то, например, так:
```
<ul class="bxslider">
    [[pdoResources?
    &parents=`123`
    &tpl=`slider-item`
    &limit=`0`
    &includeTVs=`image`
    .....
    ]]
</ul>

<div id="bx-pager">
    [[pdoResources?
    &parents=`123`
    &tpl=`slider-page`
    &limit=`0`
    &includeTVs=`image_pager`
    .....
    ]]
</div>
```
Чанк slider-item:
```
<li>
    <img src="[[+tv.image]]" title="[[+pagetitle]]" alt="" />
</li>
```
Чанк slider-page:
```
<a data-slide-index="[[+idx:decr]]" href="">
    <img src="[[+tv.image_pager]]"  alt="" />
</a>
```
1. Константин 22.03.2018 08:05 #
  
  Вы просто не представляйте, на сколько вы круты! )
  
  Спасибо вам огромное Павел. Все сделал как вы написали, создал tv и все заработало.
  вывел все как по верстке на скрине:
  yadi.sk/i/XEaXyuCi3TdVrV
  
  все работает как мне надо было, спасибо вам.

Для добавления комментариев вы должны авторизоваться или зарегистрироваться.