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

Всем привет. Решил я тут попробовать сделать динамический слайдер, используя 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=``]]
, но не сработала.
al1ve
al1ve
06 октября 2023, 19:12
modx.pro
1 188

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

al1ve
al1ve
28 октября 2023, 15:55
В общем, я переделал свой слайдер при помощи migx по этой статье — web-revenue.ru/modx-revo/sozdanie-slayderov-pri-pomoshhi-migx только в поля я ввёл переменные вида [[#id ресурса.pagetitle]], а сам код теперь выглядит так:
{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>
Всё получилось динамическим кроме одного — не знаю как правильно написать проверку. Если ресурс снят с публикации или отсутствует, то и слайда с ним нет в карусели.
    Артур Шевченко
    Артур Шевченко
    28 октября 2023, 16:30
    {if ($idx | resource: 'published') == 1}
    idx это как правило порядковый номер, лучше переименуй в id
      al1ve
      al1ve
      28 октября 2023, 16:47
      ну в моём случае, порядковый, наверное, относительно элементов в таблице migx. И ещё я заметил, что когда ввожу в блоке с индикаторами {if $idx}, а в блоке со слайдами {if $row} (если снять с публикации один из дочерних элементов с публикации, например), то всё работает, но ничего не крутится, так как у меня в коде прописано условие {if $idx==0}. Наверное, это из-за него не крутится, так как когда я снимаю ресурс с публикации, то отсчёт слайдов в data-bs-slide-to="{$idx}" начинается с 1 и тогда не срабатывает класс active. А на скрине пример заполненного поля слайда, чтобы сделать его динамичным. Только не пойму почему поля пустые в списке. Что я забыл настроить? Просто в первый раз с migx работаю.
        Артур Шевченко
        Артур Шевченко
        29 октября 2023, 13:13
        Во-первых, чтобы получать данные ресурса нужно знать его id, а непорядковый номер.
        Во-вторых, если вам нужно проверять номер итерации, так и используйте номер итерации, а не порядковый номер. Вот так
        {foreach $items as $item index=$i}
        где $i это номер итерации.
          al1ve
          al1ve
          30 октября 2023, 12:32
          Хорошо, попробую
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    5