Как в pdoNeighbors можно задать класс active первому элементу?

Пытаюсь сделать карусель из соседних ресурсов, чтобы все заработало надо указать класс active любой из ссылок
[[!pdoNeighbors?
  &id=`1294`
  &limit=`3`
  &includeTVs=`image`
  &showHidden=`0`
  &outputSeparator=``
  &hideContainers=`1`
  &tplPrev=`@INLINE <span class="link-prev"><a href="/[[+uri]]">← [[+menutitle]]</a></span>`
  &tplNext=`@INLINE <span class="link-next"><a href="/[[+uri]]">[[+menutitle]] →</a></span>`
  &tplWrapper=`@INLINE <div class="neighbors">[[+prev]][[+next]]</div>`                  
]]
но как?
Ксения
Ксения
22 января 2019, 11:43
modx.pro
2 027
0

Комментарии: 8

vectorserver
vectorserver
23 января 2019, 10:57
0
Ну и добавь к классу link-prev класc active
    Ксения
    Ксения
    23 января 2019, 11:00
    0
    И?
    Будет 3 ссылки с классом active
    Мне нужна одна
      vectorserver
      vectorserver
      23 января 2019, 11:20
      0
      используй тогда pdoresources, вот пример
      [[pdoresources?
    &parents=`508`
    &limit=`2`
    &tpl=`@INLINE <span class="{{+idx:is=`1`:then=`link-prev active`:else=`link-next`}}"><a href="/[[+uri]]">[[+pagetitle]]</a></span>`
]]
        Ксения
        Ксения
        23 января 2019, 12:10
        0
        с pdoresources понятно, но надо выводить соседние документы, а не абы какие, поэтому и нужен именно pdoNeighbors
          vectorserver
          vectorserver
          23 января 2019, 12:40
          0
          А если так?
          <link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet"  href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<script>
    $(document).ready(function () {
        var owl = $('.owl-carousel');
        owl.owlCarousel({
            margin: 10,
            nav: true,
            loop: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        })
    })
</script>
[[!pdoNeighbors?
    &id=`1294`
    &limit=`3`
    &includeTVs=`image`
    &showHidden=`0`
    &outputSeparator=``
    &hideContainers=`1`
    &tplPrev=`@INLINE <div class="item"><a href="/[[+uri]]">Картинка</a></div>`
    &tplNext=`@INLINE <div class="item"><a href="/[[+uri]]">Картинка</a></div>`
    &tplWrapper=`@INLINE<div class="owl-carousel owl-theme">[[+prev]][[+next]]</div>`
]]
            Ксения
            Ксения
            23 января 2019, 12:45
            0
            В owlcarousel класс active не нужен.
            Причем тут она?
              vectorserver
              vectorserver
              23 января 2019, 18:38
              0
              Ну тогда модифицируй сниппет, добавь индекс в массив вывода, т.к там не за че зацепиться
    vectorserver
    vectorserver
    23 января 2019, 11:24
    0
    Или используй JS на примере owlcarousel2 owlcarousel2.github.io/OwlCarousel2/demos/basic.html
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      8