Blocks

V228-03

Geeft de image carousel weer als opgedeelde panelen. De layout wordt automatisch zo goed mogelijk weggezet. Standaard is er ondersteuning tot 6 fotos. Links zullen automatisch over de hele foto gezet worden. Op mobiel zullen de foto's onder elkaar gezet worden met als maximum twee naast elkaar.

De front-ender kan bepalen hoeveel foto's er maximaal mogelijk zijn voordat het wordt opgedeeld in een nieuwe sectie. Dit kan via het `items-per-panel` attribuut die meegegeven kan worden via de attributes attribuut.

Hoe te gebruiken?

Neem onderstaande HTML en CSS code over in de website.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<nc-image-carousel name="TODO:" width="640" height="640" view="blocks"></nc-image-carousel>

<nc-image-carousel name="TODO:" width="640" height="640" view="blocks" attributes="items-per-panel=5"></nc-image-carousel>

CSS
Kopiëren[data-partial="image-carousel"] .image-panel {
	display: grid;
	margin-left: -15px;
	margin-right: -15px;
}
[data-partial="image-carousel"] .image-panel-item {
	margin: 15px;
	border-radius: var(--panel-radius);
	overflow: hidden;
}
[data-partial="image-carousel"] .image-panel-item img {
	height: 100%;
	object-fit: cover;
	object-position: 50%;
}
[data-partial="image-carousel"] .image-panel-caption {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: end;
	flex-direction: column;
	flex-wrap: nowrap;
	padding-left: 2em;
	padding-bottom: 0.75em;
	padding-right: 2em;
	color: white;
	font-size: 1.25em;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
[data-partial="image-carousel"] .image-panel-item a {
	color: inherit;
}
[data-partial="image-carousel"] .image-panel-item:has(a)::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: var(--primary);
	pointer-events: none;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 500ms;
}
[data-partial="image-carousel"] .image-panel-item:has(a:focus)::before,
[data-partial="image-carousel"] .image-panel-item:has(a:hover)::before  {
	opacity: 0.3;
}

[data-partial="image-carousel"] .image-panel[data-image-panels="1"] {
	grid-template-columns: 1fr;
	grid-template-areas:
		"primary";
}
[data-partial="image-carousel"] .image-panel[data-image-panels="2"] {
	grid-template-columns: 1fr;
	grid-template-areas:
		"primary"
		"secondary";
}
[data-partial="image-carousel"] .image-panel[data-image-panels="3"] {
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		"primary primary"
		"secondary tertiary";
}
[data-partial="image-carousel"] .image-panel[data-image-panels="4"] {
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		"primary primary"
		"secondary secondary"
		"tertiary quaternary";
}
[data-partial="image-carousel"] .image-panel[data-image-panels="5"] {
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		"primary primary"
		"secondary tertiary"
		"quaternary quinary";
}
[data-partial="image-carousel"] .image-panel[data-image-panels="6"] {
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		"primary secondary"
		"tertiary quaternary"
		"quinary senary";
}
@media screen and (min-width: 992px) {
	[data-partial="image-carousel"] .image-panel[data-image-panels="1"] {
		grid-template-columns: 1fr;
		grid-template-areas:
			"primary";
	}
	[data-partial="image-carousel"] .image-panel[data-image-panels="2"] {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"primary secondary"
			"primary secondary";
	}
	[data-partial="image-carousel"] .image-panel[data-image-panels="3"] {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"primary secondary"
			"primary tertiary";
	}
	[data-partial="image-carousel"] .image-panel[data-image-panels="4"] {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"primary secondary secondary"
			"primary tertiary quaternary";
	}
	[data-partial="image-carousel"] .image-panel[data-image-panels="5"] {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"primary secondary tertiary"
			"primary quaternary quinary";
	}
	[data-partial="image-carousel"] .image-panel[data-image-panels="6"] {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"primary secondary tertiary"
			"quaternary quinary senary";
	}
}