Это тестовый сайт бренда ALEXSAB, BAIC, BELGEE, CHANGAN, CHERY, EVOLUTE, FORTHING, GAC, GEELY, HAVAL, HONDA, HYUNDAI, INFINITI, JAC, JAECOO, JETOUR, KAIYI, KIA, KNEWSTAR, LEXUS, LIVAN, MAZDA, OMODA, SOLARIS, SOUEAST, TANK, TENET, TOYOTA, VOLGA, VENUCIA, VGV, WEY, ваши заявки НЕ попадут к дилеру!

Banner

Props - Array (опционально)

interface Props {
	banners?: TBanner[]
}

По умолчанию: данные из src/data/banners.json

Использование

---
import Banner from '@/blocks/banner/Banner.astro';
const arrayBanners = [
	{ 
		"imageUrl": "https://site.com/img/image.webp" // required
	},
	{ 
		"imageUrl": "https://site.com/img/image2.webp" // required
	},
];
---

<Banner banners={arrayBanners} />

Параметры

type TBanner = {
	id?: number 
	show?: boolean
	type?: string
	view?: string
	videoUrl?: string
	imageUrl: string
	tabletImageUrl?: string
	mobileImageUrl?: string
	imagePosition?: string 
	bannerUrl?: string
	target?: string
	gradient?: boolean
	title?: string
	descr?: string
	btn?: string
	btnUrl?: string
	btnColor?: string
	dataTitle?: string
	dataFormName?: string
	badge?: TBadge
	autoplay?: number
}

type TBadge = {
	autoname?: string
	title?: string
	descr?: string
	image?: string
	position?: string
	colorText?: string
	bg?: boolean
}
Имя параметраПо умолчаниюОписание
imageUrl*Обязательный параметр. Изображение для десктоп или для постера видео
id-Необязательный параметр
showtrueПараметр показа слайда, true or false. Необязательный параметр
typeimageТип слайда - video or image. Необязательный параметр
viewlinkТип кнопки - link, popup-link, scroll-link. Необязательный параметр
videoUrl-Обязательный, если type === video
tabletImageUrl-Изображение для планшетов. Необязательный параметр
mobileImageUrl-Изображение для мобильных. Необязательный параметр
imagePositioncenterНеобязательный параметр, bottom, top, center
bannerUrl-Если btn пустой, а этот параметр заполнен, то слайд будет ссылкой
target-Если bannerUrl заполнен, можно указать в какой вкладке открыть окно, например _blank (в новой). Необязательный параметр
gradienttrueВерхнее затемнение под текстом. Необязательный параметр
title-Заголовок в слайде. Возможность передать HTML теги. Если, например, изображение уже с текстом, можно оставить пустым. Необязательный параметр.
descr-Подзаголовок. Возможность передать HTML теги. Если, например, изображение уже с текстом, можно оставить пустым. Необязательный параметр
btn-Текст кнопки. Если кнопка не нужна, например, bannerUrl заполнен. Необязательный параметр
btnUrl-Ссылка для кнопки. Необязательный параметр
btnColorwhiteЦвет кнопки, все доступные стили из src/components/Button/buttons.scss. Необязательный параметр
dataTitle-Заголовок модального окна. Обязательный, если view === popup-link
dataFormName-Имя формы в модальном окне. Обязательный, если view === popup-link
badge-type TBadge, см. ниже. Необязательный параметр
autoplay5000Заддержка слайда в милесекундах. Необязательный параметр

TBadge

Имя параметраПо умолчаниюОписание
autoname-Название автомобиля (бренда), возможность передать HTML теги. Отобразится, если заполнен
title-Заголовок, возможность передать HTML теги. Отобразится, если заполнен
descr-Описание, возможность передать HTML теги. Отобразится, если заполнен
image-Изображение. Отобразится, если заполнен
positioncenterПозиция бейджа, left, right, center. Необязательный параметр
colorTextwhiteЦвет текста, black, white. Необязательный параметр
bgfalseПолупрозрачный белый фон. Необязательный параметр
вернуться обратно
x