Bootstrap слайдер с помощью Pdoresources + Gallery.

Коллеги, подскажите, пожалуйста в этом вопросе. Ищу решения как с помощью стандартного дополнения Gallery сделать слайдер. Сложности возникают в выводе carousel-indicators (номер картинки в слайдере, использую стандартный слайдер на bootstrap). У ms2Gallery есть готовый код для решения этой проблемы, но для текущего проекта покупать дополнение не получается в силу ограниченного бюджета. Можно ли адаптировать решение по реализации слайдера для бесплатного компонента Gallery?
Если я правильно понимаю, что все сложности в этом
[[!pdoResources?
&class=`msResourceFile` — тут
&loadModels=`ms2gallery` — тут
Какие параметры нужно использовать тут? Может у кого-то есть уже готовое решение такой проблемы?

Максим

06 июля 2021, 14:53

1 119

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

Роман

06 июля 2021, 15:08

Не очень понятно, о чем идет речь. Можно просто вызвать:

[[Gallery? &album=`1` &sortby=`rank` &containerTpl=`tpl.gallItem` &thumbTpl=`GalItemThumb`]]

Можете использовать, для обозначения номера картинки:

[[+sort_order]]

Максим

06 июля 2021, 15:25

Попробую расписать все подробно.
Вот html код самого слайдера:

<div class="container-fluid">
    <div class="row">
<div class="col-lg-12 d-flex justify-content-center p-0">
    <div class="carousel slide" data-bs-ride="carousel" id="carouselExampleIndicators">
        <div class="carousel-indicators">
            <button aria-current="true" aria-label="Slide 1" class="active" data-bs-slide-to="0" data-bs-target="#carouselExampleIndicators" type="button">
                <span>01</span>
            </button>
            --- проблемы с этим блоком
            <button aria-label="Slide 2" data-bs-slide-to="1" data-bs-target="#carouselExampleIndicators" type="button">
                <span>02</span>
            </button>
            <button aria-label="Slide 3" data-bs-slide-to="2" data-bs-target="#carouselExampleIndicators" type="button">
                <span>03</span>
            </button>
            <button aria-label="Slide 4" data-bs-slide-to="3" data-bs-target="#carouselExampleIndicators" type="button">
                <span>04</span>
            </button>
              ------
        </div>
        <div class="carousel-inner">
            [[Gallery? &album=`[[*galleryName]]`  &thumbTpl=`sliderThumbs`]] -- тут вывожу картинки
        </div>
        <button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselExampleIndicators" type="button">
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#carouselExampleIndicators" type="button">
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>
</div>
</div>

в шаблоне sliderThumbs код следующий:

<div class="carousel-item [[+idx:is=`0`:then=`active`]]">
    <div class="img-item"><img alt="[[+name]]" class="d-block" src="[[+image_absolute]]" /></div>
</div>

Не знаю как решить проблему с выводом количества индикаторов и выводом индикаторов в цикле

Роман

06 июля 2021, 16:04

Возможно не правильно:

<div class="carousel-indicators">[[Gallery? &album=`[[*galleryName]]`  &thumbTpl=`sliderindicators`]]</div>

в шаблоне sliderindicators код следующий:

<button aria-current="true" aria-label="Slide [[+idx]]" class="[[+idx:is=`0`:then=`active`]]" data-bs-slide-to="[[+idx]]" data-bs-target="#carouselExampleIndicators" type="button">
    <span>[[+idx]]</span>
</button>

Максим

06 июля 2021, 19:48

Спасибо. Сразу не подумал, что можно вызвать галерею 2 раза и у каждого вызова задать свой шаблон. Задача решена.

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

Bootstrap слайдер с помощью Pdoresources + Gallery.

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

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