Slider

V310-01

Hoe te gebruiken?

Neem onderstaande code over in het template.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<div class="container">
	<nc-text name="social_media_posts-text"></nc-text>

	<nc-partial-list name="social_media_posts" partials="embed" view="slider" attributes="class=social_media_posts,carousel-controls,carousel-indicators" layout-button="Post toevoegen" default-partials="embed,embed,embed"></nc-partial-list>
</div>
CSS
/* Voeg witruimte tussen de posts. */
.social_media_posts .flex-slider{
	gap: 30px;
}
/* Reduceer het aantal kolommen op een breed scherm. */
@media (min-width: 1200px) {
	.social_media_posts .flex-auto-responsive>*, .flex-auto-responsive>a>picture>img, .flex-auto-responsive>picture>img {
		min-width: calc(33.33333% - 30px);
		min-width: calc(var(--container-width) / 2.85 - 30px);
	}
}

.social_media_posts .slider-indicators li:after {
	color: var(--primary-light);
}
/* Verberg de indicators die niet gebruikt kunnen worden. */
.social_media_posts .slider-indicators li.disabled:after,
.social_media_posts .slider-indicators li:disabled:after {
	display: none;
}

/* Optioneel verander de icons. */
.social_media_posts .slider-control-prev-icon:after {
	content: "\f137";
	color: var(--primary-light);
}
.social_media_posts .slider-control-next-icon:after {
	content: "\f138";
	color: var(--primary-light);
}