Garden

V239-08

Content select slider view die kan worden gestyled door het aanpassen van de standaard variabelen in de stylesheet. De panel items hebben een hover effect. Bekijk hier een voorbeeld.

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS regels in je template en selecteer de content select module in het NASA systeem.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<div class="content-select-garden">
	<div class="p-2 p-lg-0">
		<div class="row align-items-end">
			<div class="col-12 col-lg-4">
				<nc-text name="content-garden"></nc-text>
			</div>
			<div class="col-12 col-lg-8">
				<nc-content-select name="content-select" rows="1" view="slider" title="menu" attributes="slider-controls"></nc-content-select>
			</div>
		</div>
	</div>
</div>

CSS
Kopiëren.content-select-garden .content-item-preview {
	position: relative;
	scroll-snap-align: center;
	margin-right: 1.5rem;
}

.content-select-garden .content-item-preview * {
	border-radius: var(--panel-radius);
}

.content-select-garden .flex-slider {
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	will-change: transform;
}

.content-select-garden .content-item-link {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

.content-select-garden .content-item-preview img {
	aspect-ratio: 4/3;
	object-fit: cover;
}

.content-select-garden .content-item-preview image{
	position: relative;
}

.content-select-garden .content-item-preview .image:after {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background-color: var(--primary);
	transition: opacity 0.3s;
	opacity: 0;
	border-radius: var(--panel-radius);
}

.content-select-garden .content-item-preview:hover .image:after,
.content-select-garden .content-item-preview:focus .image:after {
	opacity: 0.6;
}

.content-select-garden .content-item-preview .content {
	position: absolute;
	left: 2rem;
	bottom: 2rem;
}

.content-select-garden .content-item-preview .content .intro {
	display: none;
}

.content-select-garden .flex-auto-responsive > * {
	min-width: 400px;
}

.content-select-garden .slider-control-prev-icon::after {
	content: "\f060";
	font-size: 2rem;
}

.content-select-garden .slider-control-next-icon::after {
	content: "\f061";
	font-size: 2rem;
}

.content-select-garden .slider-control-next-icon {
	margin-left: 1.5rem;
}

.content-select-garden .d-flex:not(.d-flex.flex-slider){
	margin-top: 1rem;
}

@media only screen and (min-width: 992px) {

	.content-select-garden {
		padding-left: calc((100vw - var(--container-width)) / 2 + 15px);
	}

	.content-select-garden .content-item-preview img {
		aspect-ratio: 5/3;
		object-fit: cover;
	}

	.content-select-garden .flex-auto-responsive > * {
		min-width: 800px;
	}


	.content-select-garden .d-flex:not(.d-flex.flex-slider) {
		position: absolute;
		left: -90px;
		bottom: 0;
	}
}