How to make a two-element carousel bootstrap on handlebars with dynamic data?

Question

JavaScript

Good afternoon.
There is an array with event data (data) that is loaded into the handlebar. Let's say 9 events in an array.

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

In the hbs itself, I output data through each to the carousel using the bootstrap library:

<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>

It all looks like this:


In general, everything is great and everything works.

Question: How can I do the same only so that two events are displayed in the carousel and if we say there are an odd number of elements in the array, then display the last and first element of the array?

As I understand it, you need to write your carousel in jQuery and make a function there to handle the data received from the server.