alexbuki
@alexbuki
программист js

Как сделать карусель на два элемента bootstrap на handlebars c динамическими данными?

Добрый день.
Есть массив с данными мероприятий (data), которые подгружаются в хендлбар. Скажем 9 мероприятий в массиве.

res.render(path.join(getSolutionViewFolder(), 'startPage.hbs'), {
			layout: path.join(getSolutionViewFolder(), 'mainLayout.hbs'),
			data: data
		});


В самом hbs я вывожу данные через each в карусель, используя библиотеку bootstrap:
<div>
                                <h6 class=" font-weight-bold bg-dark" id="idsevents" >
                                    <strong>Мероприятия</strong>
                                </h6>
                                <br>
                                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                                    <div class="carousel-inner">

                                        <div class="text-white text-left d-flex">
                                            {{#each data.events}}
                                                {{#if @first}}
                                                <div class="carousel-item active">
                                                {{else}}
                                                <div class="carousel-item">
                                                {{/if}}
                                                <div>
                                                    <a class="text-white" href="/site/idsnews?id={{{id}}}">{{{Date}}}</a>
                                                    <br>
                                                    <br>
                                                    <h6 class="text-white" href="/site/idsnews?id={{{id}}}"><strong>{{{Subject}}}</strong></h6>
                                                    <a class="text-white" href="/site/idsnews?id={{{id}}}">{{{Text}}}</a>
                                                </div>
                                            </div>
                                            {{/each}}
                                        </div>
                                        </div>
                                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </div>


                                </div>
                            </div>


Выглядит это все вот так:
5c419d2e131dd916709529.jpeg

В целом все здорово и все работает.

Вопрос: Как мне сделать тоже самое только, чтобы выводилось по два мероприятия в карусели и если скажем элементов в массиве нечетное количество, то выводить последний и первый элемент массива?

Я так понимаю нужно написать свою карусель на jquery и сделать там функцию обработчик полученных данных с сервера.
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы