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

2 224

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

vectorserver

23 января 2019, 10:57

Ну и добавь к классу link-prev класc active

Ксения

23 января 2019, 11:00

И?
Будет 3 ссылки с классом active
Мне нужна одна

vectorserver

23 января 2019, 11:20

используй тогда 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

с pdoresources понятно, но надо выводить соседние документы, а не абы какие, поэтому и нужен именно pdoNeighbors

vectorserver

23 января 2019, 12:40

А если так?

<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

В owlcarousel класс active не нужен.
Причем тут она?

vectorserver

23 января 2019, 18:38

Ну тогда модифицируй сниппет, добавь индекс в массив вывода, т.к там не за че зацепиться

vectorserver

23 января 2019, 11:24

Или используй JS на примере owlcarousel2 owlcarousel2.github.io/OwlCarousel2/demos/basic.html

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

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

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

Здесь упомянуты