Trans

V239-05

Content selectie slider view met Foto, navigatie titel, text en slider controls helemaal links en rechts uitlijnend. 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="py-5 trans-view position-relative">
	<div class="container">
		<nc-element name="trans-select-title" default="Waarmee kunnen wij u helpen?" type="h2" attributes="class=mb-5"></nc element>
		<nc-content-select name="trans-select" sort="ascending" view="slider" attributes="carousel-controls"></nc-content-select>
	</div>
</section>

CSS
Kopiëren.trans-view .content-item-preview {
	margin-right: 1.25rem;
	flex-basis: 25%;
}

/* Verwijder de underline on hover van de link */

.trans-view .content-item-preview a:hover {
	text-decoration: none;
}

.trans-view .content-item-preview .title {
	margin-top: 1rem;
	color: #000000;
}

.trans-view .content-item-preview .content {
	color: #000000;
}

.trans-view .content-item-preview .image img {
	border-radius: var(--panel-border);
	aspect-ratio: 5/3;
	object-fit: cover;
}

.trans-view .content-item-preview .content .intro .readmore {
	display: table;
	margin-top: 1rem;
}

.trans-view .content-item-preview .content .intro .readmore::after {
	position: relative;
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font);
	content: "\f061";
	color: var(--primary);
	margin-left: 0.5rem;
	left: 0;
	transition: 0.4s all;
}

.trans-view .content-item-preview:hover .content .intro .readmore::after {
	left: 10px;
	color: #000;
}

/* Verander hier eventueel de minimale breedte van de panel items */

.trans-view .flex-auto-responsive > * {
	min-width: 300px;
}

.trans-view .slider-control-prev {
	position: absolute;
	top: 25%;
	background-color: var(--primary);
	padding: 2rem 0.5rem;
	opacity: 1;
	left: 0;
	border-bottom-right-radius: var(--button-border);
}

.trans-view .slider-control-next {
	position: absolute;
	top: 25%;
	background-color: var(--primary);
	padding: 2rem 0.5rem;
	opacity: 1;
	right: 0;
	border-top-left-radius: var(--button-border);
}

/* Verander hier eventueel de icoontjes van de slider controls*/

.trans-view .slider-control-prev .slider-control-prev-icon::after {
	content: "\f053";
	color: inherit;
}

.trans-view .slider-control-next .slider-control-next-icon::after {
	content: "\f054";
	color: inherit;
}

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

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

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