Fighter

V217-10

Een variant op de blog feed. Zet het attribuut columns minimaal op 2 om een carousel effect te kunnen krijgen.

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS code en zet de blog feed aan in NASA.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="fighter-feed-page">
	<div class="container">
		<nc-blog-feed name="FIXME:" collection="FIXME:" default-columns="4" rows="1" view="multi-carousel" attributes="carousel-controls, carousel-indicators, class=carousel-fade" template="default"></nc-blog-feed>
	</div>
</section>

CSS
Kopiëren/* [ Fighter Feed] */

.fighter-feed-page .carousel-previews{
	display: none;
}

.fighter-feed-page .carousel-indicators{
	position: relative;
	width: 100%;
	margin: 0;
	padding-top: 1rem;
}

.fighter-feed-page .carousel-indicators li{
	margin: 0;
	background-color: #b3b3b3;
	width: 15%;
	transition: background-color, opacity 0.4s ease-in-out;
}

.fighter-feed-page .carousel-indicators li.active{
	background-color: var(--secondary);
}

.fighter-feed-page .carousel-control-prev,
.fighter-feed-page .carousel-control-next{
	top: unset;
	z-index: 20;
	opacity: 1;
	padding-top: 1rem;
	width: unset;
}

.fighter-feed-page .carousel-control-prev-icon,
.fighter-feed-page .carousel-control-next-icon{
	display: none;
}

.fighter-feed-page .carousel-control-prev::after,
.fighter-feed-page .carousel-control-next::after{
	 display: inline-block;
	 text-rendering: auto;
	 -webkit-font-smoothing: antialiased;
	 font: var(--fa-font);
	 color: var(--secondary);
	 font-size: 1.5rem;
}

.fighter-feed-page .carousel-control-prev::after{
	content: "\f137";
}

.fighter-feed-page .carousel-control-next::after{
	content: "\f138";
}

.fighter-feed-page .carousel-item.active{
	transition: opacity 0.6s ease;
}

@media only screen and (min-width: 1200px){
	.fighter-feed-page .blog-item-link{
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.fighter-feed-page .blog-item-link .content{
		width: 40%;
		padding: 1rem;
	}

	.fighter-feed-page .blog-item-link .image{
		width: 50%;
		aspect-ratio: 1/1;
	}

	.fighter-feed-page .blog-item-link .image img{
		aspect-ratio: 1/1;
		object-fit: cover;
	}

	.fighter-feed-page .carousel-control-prev{
		top: 0;
		align-items: unset;
	}

	.fighter-feed-page .carousel-control-prev::after{
		content: "\f139";
	}

	.fighter-feed-page .carousel-control-next::after{
		content: "\f13a";
	}
	.fighter-feed-page .carousel-indicators{
		position: absolute;
		left: 0;
		width: 30%;
	}

	.fighter-feed-page .carousel-indicators{
		transform: rotate(90deg) translateX(-250px) translateY(146px);
	}

	.fighter-feed-page .carousel-control-next{
		bottom: 0;
		right: unset;
		left: 0;
		align-items: unset;
	}


	.fighter-feed-page .carousel-indicators li{
		margin: 0;
		background-color: #b3b3b3;
		width: 30%;
	}
}