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

Question

[Александр Буки]

Добрый день.
Есть массив с данными мероприятий (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>

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


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

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

Я так понимаю нужно написать свою карусель на jquery и сделать там функцию обработчик полученных данных с сервера.