Lunch-slider

V000-45

Een preset om content blokjes in een slider weer te geven. De blokjes kunnen dynamisch toegevoegd worden. Daarnaast wordt de tekst ingekort en een lees meer knop toegevoegd wanneer er meer dan 80 karakters gebruikt worden.

Hoe te gebruiken?

Kopieer onderstaande html en css in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="lunch-slider">
	<nc-preset-list name="lunch-slider" attributes="class=pl-container,slider-controls" view="slider">
		<div class="lunch-item">
			<nc-image name="{%name%}-image" width="300" height="300"></nc-image>
			<nc-element name="{%name%}-title" attributes="class=title"></nc-element>
			<nc-text name="{%name%}-content" attributes="class=content,data-shorten-text-to=80, data-shorten-button-class=readmore"></nc-text>
		</div>
	</nc-preset-list>
</section>

CSS
Kopiëren.pl-container {
	padding-left: calc(((100vw - var(--container-width)) / 2) + 15px);
}

section.lunch-slider .flex-slider {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

section.lunch-slider .flex-slider::-webkit-scrollbar {
	display: none;
}

section.lunch-slider .lunch-item .title {
	font-family: var(--font-family-heading);
}

section.lunch-slider .lunch-item {
	position: relative;
	min-width: 260px;
	max-width: 300px;
	aspect-ratio: 1/1;
	margin-right: 1.5rem;
	padding-bottom: 2rem;
}

section.lunch-slider .lunch-item .content p {
	margin-bottom: 0;
}

section.lunch-slider .lunch-item img {
	border-radius: 50%;
	margin-bottom: 2rem;
}

section.lunch-slider .lunch-item .readmore {
	border: none;
	color: var(--primary);
	text-decoration: underline;
	background-color: transparent;
	font-weight: 400;
	padding: 0;
}