Как в 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
1 666
0

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

vectorserver
23 января 2019, 10:57
0
Ну и добавь к классу link-prev класc active
    Ксения
    23 января 2019, 11:00
    0
    И?
    Будет 3 ссылки с классом active
    Мне нужна одна
      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
          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
              23 января 2019, 18:38
              0
              Ну тогда модифицируй сниппет, добавь индекс в массив вывода, т.к там не за че зацепиться
    vectorserver
    23 января 2019, 11:24
    0
    Или используй JS на примере owlcarousel2 owlcarousel2.github.io/OwlCarousel2/demos/basic.html
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      8