Layout for cluster balloon "Carousel"

Open in CodeSandbox

The example uses the "cluster#balloonCarousel" cluster balloon layout.
In this layout, information about the geo object is shown in the center, and buttons for going to the previous and next geo objects are shown on the sides.
There is a quick navigation menu in the lower part of the balloon.
The information about the selected geo object is set by a separate layout and can be configured using the 'clusterBalloonItemContentLayout' option.
This example sets a custom layout with information about a geo object.

Layouts for objects can be created using the templateLayoutFactory factory, and using text templates.
Text templates form the HTML content of the layout from a hash with the data passed to the layout constructor.
In this example, the data provider is the geo object. 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <html>
        <head>
            <title>
                Examples. Customization of the "Carousel" cluster balloon
                layout.
            </title>
            <meta
                http-equiv="Content-Type"
                content="text/html; charset=UTF-8"
            />
            <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
            <script
                src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
                type="text/javascript"
            ></script>
            <script
                src="cluster_balloon_carousel.js"
                type="text/javascript"
            ></script>
            <style>
                html,
                body {
                    margin: 0;
                    padding: 0;
                }
                html,
                body,
                #map {
                    width: 100%;
                    height: 100%;
                }

                .ballon_header {
                    font-size: 16px;
                    margin-top: 0;
                    margin-bottom: 10px;
                    color: #708090;
                }
                .ballon_body {
                    font-size: 14px;
                    text-align: center;
                }
                .ballon_footer {
                    font-size: 12px;
                    text-align: right;
                    color: #7d7d7d;
                    margin-top: 10px;
                }
            </style>
        </head>
        <body>
            <div id="map"></div>
        </body>
    </html>
</html>

ymaps.ready(function () {
    var mapCenter = [55.755381, 37.619044],
        map = new ymaps.Map("map", {
            center: mapCenter,
            zoom: 9,
            controls: [],
        });

    // Creating a custom layout with information about the selected geo object.
    var customItemContentLayout = ymaps.templateLayoutFactory.createClass(
        // The "raw" flag means that data is inserted "as is" without escaping HTML.
        "<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>" +
            "<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>" +
            "<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>"
    );

    var clusterer = new ymaps.Clusterer({
        clusterDisableClickZoom: true,
        clusterOpenBalloonOnClick: true,
        // Setting the "Carousel" standard layout for a cluster balloon.
        clusterBalloonContentLayout: "cluster#balloonCarousel",
        // Setting a custom layout.
        clusterBalloonItemContentLayout: customItemContentLayout,
        /**
         * Setting the mode for opening the balloon.
         * In this example, the balloon will never open in the panel mode.
         */
        clusterBalloonPanelMaxMapArea: 0,
        // Setting the size of the balloon content layout (in pixels).
        clusterBalloonContentLayoutWidth: 200,
        clusterBalloonContentLayoutHeight: 130,
        // Setting the maximum number of items in the bottom panel on one page
        clusterBalloonPagerSize: 5,
        /**
         * Configuring external view of the bottom panel.
         * The marker mode is recommended for use with a small number of elements.
         * clusterBalloonPagerType: 'marker',
         * You can disable cycling the list when navigating using the side arrows.
         * clusterBalloonCycling: false,
         * You can disable displaying the navigation menu.
         * clusterBalloonPagerVisible: false
         */
    });

    // Populating the cluster with geo objects with random positions.
    var placemarks = [];
    for (var i = 0, l = 100; i < l; i++) {
        var placemark = new ymaps.Placemark(getRandomPosition(), {
            // Defining the data that will be displayed in the balloon.
            balloonContentHeader: "Placemark #" + (i + 1),
            balloonContentBody: getContentBody(i),
            balloonContentFooter: "Matsuo Bashō",
        });
        placemarks.push(placemark);
    }

    clusterer.add(placemarks);
    map.geoObjects.add(clusterer);

    function getRandomPosition() {
        return [
            mapCenter[0] + (Math.random() * 0.3 - 0.15),
            mapCenter[1] + (Math.random() * 0.5 - 0.25),
        ];
    }

    var placemarkBodies;
    function getContentBody(num) {
        if (!placemarkBodies) {
            placemarkBodies = [
                [
                    "Say something",
                    "and the lips go cold:",
                    "autumn wind!",
                ].join("<br/>"),
                [
                    "Rising again",
                    "the chrysanthemums faint",
                    "after the rains.",
                ].join("<br/>"),
                [
                    "Lightning",
                    "hand into take dark,",
                    " small-candle-light.",
                ].join("<br/>"),
            ];
        }
        return "<br>" + placemarkBodies[num % placemarkBodies.length];
    }
    clusterer.balloon.open(clusterer.getClusters()[0]);
});