---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/cluster_balloon_carousel.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/cluster_balloon_carousel.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Макета балуна кластера "Карусель"
Open in CodeSandbox
В примере используется макет балуна кластера "cluster#balloonCarousel".
Макет, в котором информация о геообъекте располагается в центре, а по бокам располагаются кнопки перехода к предыдущему и следующему геообъекту.
В нижней части балуна находится меню быстрой навигации.
Информация о выбранном геообъекте задается отдельным макетом и может быть настроена при помощи опции 'clusterBalloonItemContentLayout'.
В данном примере задается собственный макет с информацией о геообъекте.
Макеты объектов можно создавать с помощью фабрики templateLayoutFactory, используя текстовые шаблоны.
Текстовые шаблоны формируют html-содержимое макета на основе хэша с данными, передаваемого в конструктор макета.
В данном примере поставщик данных - это геообъект.
{% list tabs %}
- index.html
```html
Макета балуна кластера "Карусель"
```
- cluster_balloon_carousel.js
```js
ymaps.ready(function () {
var mapCenter = [55.755381, 37.619044],
map = new ymaps.Map("map", {
center: mapCenter,
zoom: 9,
controls: [],
});
// Создаем собственный макет с информацией о выбранном геообъекте.
var customItemContentLayout = ymaps.templateLayoutFactory.createClass(
// Флаг "raw" означает, что данные вставляют "как есть" без экранирования html.
"" +
"{{ properties.balloonContentBody|raw }}
" +
""
);
var clusterer = new ymaps.Clusterer({
clusterDisableClickZoom: true,
clusterOpenBalloonOnClick: true,
// Устанавливаем стандартный макет балуна кластера "Карусель".
clusterBalloonContentLayout: "cluster#balloonCarousel",
// Устанавливаем собственный макет.
clusterBalloonItemContentLayout: customItemContentLayout,
// Устанавливаем режим открытия балуна.
// В данном примере балун никогда не будет открываться в режиме панели.
clusterBalloonPanelMaxMapArea: 0,
// Устанавливаем размеры макета контента балуна (в пикселях).
clusterBalloonContentLayoutWidth: 200,
clusterBalloonContentLayoutHeight: 130,
// Устанавливаем максимальное количество элементов в нижней панели на одной странице
clusterBalloonPagerSize: 5,
// Настройка внешнего вида нижней панели.
// Режим marker рекомендуется использовать с небольшим количеством элементов.
// clusterBalloonPagerType: 'marker',
// Можно отключить зацикливание списка при навигации при помощи боковых стрелок.
// clusterBalloonCycling: false,
// Можно отключить отображение меню навигации.
// clusterBalloonPagerVisible: false
});
// Заполняем кластер геообъектами со случайными позициями.
var placemarks = [];
for (var i = 0, l = 100; i < l; i++) {
var placemark = new ymaps.Placemark(getRandomPosition(), {
// Устаналиваем данные, которые будут отображаться в балуне.
balloonContentHeader: "Метка №" + (i + 1),
balloonContentBody: getContentBody(i),
balloonContentFooter: "Мацуо Басё",
});
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 = [
["Слово скажу -", "Леденеют губы.", "Осенний вихрь!"].join(
"
"
),
[
"Вновь встают с земли",
"Опущенные дождем",
"Хризантем цветы.",
].join("
"),
[
"Ты свечу зажег.",
"Словно молнии проблеск,",
"В ладонях возник.",
].join("
"),
];
}
return "
" + placemarkBodies[num % placemarkBodies.length];
}
clusterer.balloon.open(clusterer.getClusters()[0]);
});
```
{% endlist %}