Как починить динамический слайдер?

Всем привет. Решил я тут попробовать сделать динамический слайдер, используя bootstrap и pdoTools.
Идея заключалась в том, что когда снимают категорию с публикации, то пропадает и слайд категории с карусели.
Сами категории услуг я решил сделать в виде MiniShop2.

Код самого слайдера:

<div id="portfolio-category-caption" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    [[!pdoResources?
	&parents=`7`
	&tpl=`@FILE:chunks/slider/slider-indicators.tpl`
	&tplFirst=`@FILE:chunks/slider/slider-indicators-first.tpl`
	&where=`{ "template" : "10" }`
	]]
  </div>
  <div class="carousel-inner">
    [[!pdoResources?
	&parents=`7`
	&level=`1`
	&tvPrefix=``
	&includeTVs=`portfolio_category_image`
	&tpl=`@FILE:chunks/slider/slider-item.tpl`
	&tplFirst=`@FILE:chunks/slider/slider-item-first.tpl`
	&where=`{ "template" : "10" }`
	]]
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#portfolio-category-caption" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#portfolio-category-caption" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Код чанка активного слайда (для не активного слайда тот же код, только без класса active):

<a href="{$_pls['uri']}">
  <div class="carousel-item active">
	<img src="{$portfolio_category_image}" class="d-block w-100" alt="{$pagetitle}">
	<div class="carousel-caption d-none d-md-block">
	  <h5>{$pagetitle}</h5>
	  <p>{$introtext | limit:'1000'}</p>
	</div>
  </div>
</a>

Код чанка активного индикатора в пагинации карусели (для не активного индикатора тот же код, только без фрагмента class=«active» aria-current=«true»):

<button type="button" data-bs-target="#portfolio-category-caption" data-bs-slide-to="[[+idx]]" class="active" aria-current="true" aria-label="[[+pagetitle]]"></button>

Всё работает, но есть несколько моментов.
1. К первому индикатору почему то привязаны два слайда. То есть, виден первый слайд и подсвечен первый индикатор. Когда листаешь до второго слайда — по прежнему подсвечен первый слайд. Порядок такой.

1 слайд — 1 индикатор
2 слайд — 1 индикатор
3 слайд — 2 индикатор
4 слайд — 3 индикатор
снова 1 слайд — не горит ни один из индикаторов

2. Когда карусель сама крутится на автомате — всё в порядке. Когда листаешь карусель вручную до конца — она доходит до последнего элемента и дальше не листается — ни назад, ни вперёд. Думаю, это связано с работой самого pdoResources, т. к. он типа перебирает массив из элементов и когда доходит до конца — дальше перебирать нечего.

3. Как проще реализовать смену класса на active или вставку кода class=«active» aria-current=«true», не прибегая к дополнительным чанкам, как у меня? Пробовал конструкцию вида

[[+idx:is=`1`:then=`active`:else=``]]

, но не сработала.

{set $rows = json_decode($_modx->resource.slider, true)}
<div id="portfolio-category-caption" class="carousel slide">
  <div class="carousel-indicators">
    {foreach $rows as $idx => $row}
	{if$_modx->resource.idx | resource: 'published' == 1}
    <button type="button" data-bs-target="#portfolio-category-caption" data-bs-slide-to="{$idx}" {if $idx==0}
	class="active" aria-current="true" {/if} aria-label="{$row.caption}"></button>
	{/if}
    {/foreach}
  </div>
  <div class="carousel-inner">
    {foreach $rows as $idx => $row}
	{if $_modx->resource.idx | resource: 'published' == 1}
    <a href="{$row.url}">
      <div class="carousel-item {if $idx == 0} active{/if}">
        <img src="{$row.slide}" class="d-block w-100"
		alt="{$row.caption}">
        <div class="carousel-caption d-none d-md-block">
          <h5>{$row.caption}</h5>
          <p class="list-style-none">{$row.description | limit:'1000'}</p>
        </div>
      </div>
    </a>
	{/if}
    {/foreach}
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#portfolio-category-caption" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#portfolio-category-caption" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>