Fit

V239-06

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<section class="fit-view position-relative">
	<div class="container">
		<nc-element name="fit-select-title" default="Op welke manier kunnen wij u van dienst zijn?" type="h2" attributes="class=mb-5"></nc-element>
		<nc-content-select name="fit-select" view="slider" sort="ascending" attributes="carousel-controls" title="menu"></nc-content-select>
	</div>
</section>

CSS
Kopiëren.fit-view .content-item-preview {
	flex-basis: 20%;
	margin-right: 1.5rem;
}

.fit-view .flex-auto-responsive > * {
	min-width: 200px;
}

.fit-view .content-item-preview img {
	border-radius: var(--panel-radius);
	transition: 0.15s ease-in-out;
	border: 0px solid transparent;
	object-fit: cover;
	aspect-ratio: 3/4;
}

.fit-view .content-item-preview:hover img,
.fit-view .content-item-preview:focus img,
.fit-view .content-item-preview:active img {
	border: var(--panel-border) solid var(--tertiary);
}

/* Verwijder de underline on hover van de link */
.fit-view .content-item-preview a:hover {
	text-decoration: none;
}

.fit-view .content-item-preview .content .title {
	font-family: var(--font-family-heading);
	color: #000;
	font-size: 1.25rem;
	text-align: center;
	margin-top: 1rem;
}

/* Laat de preview tekst zien door onderstaande css te verwijderen */
.fit-view .content-item-preview .intro {
	display: none;
}

.fit-view .flex-auto-responsive::-webkit-scrollbar {
	display: none;
}

.fit-view .slider-control-prev-icon,
.fit-view .slider-control-next-icon {
	position: absolute;
}

.fit-view .slider-control-prev-icon {
	left: 5%;
}

.fit-view .slider-control-next-icon {
	right: 5%;
}
/* Verander hier eventueel de icoontjes van de slider controls*/

.fit-view .slider-control-prev-icon::after {
	content: "\f060";
	color: var(--primary-dark);
	font-size: 1.5rem;
}
.fit-view .slider-control-next-icon::after {
	content: "\f061";
	color: var(--primary-dark);
	font-size: 1.5rem;
}

/* Verwijder eventueel de slider controls op bredere schermformaten */

/* @media only screen and (min-width: 992px) {
	.fit-view .slider-control-next,
	.fit-view .slider-control-prev {
		display: none;
	}
} */

/* @media only screen and (min-width: 1200px) {
	.fit-view .slider-control-next,
	.fit-view .slider-control-prev {
		display: none;
	}
} */

/* Customizable */

.fit-view .content-item-preview:hover img,
.fit-view .content-item-preview:focus img,
.fit-view .content-item-preview:active img {
	border-color: var(--secondary);
}


/* Geef  de panel items evenuteel 3 verschillende kleuren on hover */

/* .fit-view  .content-item-preview:nth-child(3n + 1) img{
	border-color: var(--primary);
}

.fit-view  .content-item-preview:nth-child(3n + 2) img{
	border-color: var(--secondary);
}

.fit-view .content-item-preview:nth-child(3n + 3) img{
	border-color: var(--tertiary);
} */