Code «2» • Code Snippet

HTML

<div id="carousel">
	<div class="page prev">
		<div class="img-col" style="background-image:url(https://www.fairr.de/assets/img/testimonials/robert-sasse.jpg)"></div>
		<div class="text-col">
			<div class="hl">Robert Sasse</div>
			<p>Endlich eine ETF-Rente, die sich sowohl von der GebÃ¼hrenstruktur als auch von der Rendite fÃ¼r Anleger bezahlt macht.</p>
		</div>
	</div>
	<div class="page active">
		<div class="img-col" style="background-image:url(https://www.fairr.de/assets/img/testimonials/robert-sasse.jpg)"></div>
		<div class="text-col">
			<div class="hl">Robert Sasse</div>
			<p>Endlich eine ETF-Rente, die sich sowohl von der GebÃ¼hrenstruktur als auch von der Rendite fÃ¼r Anleger bezahlt macht.</p>
		</div>
	</div>
	<div class="page next">
		<div class="img-col" style="background-image:url(https://www.fairr.de/assets/img/testimonials/robert-sasse.jpg)"></div>
		<div class="text-col">
			<div class="hl">Robert Sasse</div>
			<p>Endlich eine ETF-Rente, die sich sowohl von der GebÃ¼hrenstruktur als auch von der Rendite fÃ¼r Anleger bezahlt macht.</p>
		</div>
	</div>
	<div class="page">
		<div class="img-col" style="background-image:url(https://www.fairr.de/assets/img/testimonials/robert-sasse.jpg)"></div>
		<div class="text-col">
			<div class="hl">Robert Sasse</div>
			<p>Endlich eine ETF-Rente, die sich sowohl von der GebÃ¼hrenstruktur als auch von der Rendite fÃ¼r Anleger bezahlt macht.</p>
		</div>
	</div>
</div>

SCSS

body {
	background: white;
	color: black;
	margin: 100px 20px;
}

.fpcarousel {
	height: 125px;
	width: 100%;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	
	.page {
		height: 125px;
		width: 70%;
		position: absolute;
		display: none;
		
		&.transition {
			transition: all 2000ms ease-in-out;
		}
		
		.img-col {
			display: inline-block;
			width: 170px;
			height: 100%;
			border-radius: 4px;
			overflow: hidden;
			background-size: cover;
			background-position: center center;
			vertical-align: top;
		}
		.text-col {
			display: inline-block;
			width: calc(100% - 170px);
			height: 100%;
			vertical-align: top;
			white-space: normal;
			box-sizing: border-box;
			padding: 15px 30px;

.hl {
				font-size: 20px;
			}
		}

&.active {
			left: 15%;
			display: inline-block;
			opacity: 1;
		}
		&.prev {
			left: -55%;
			display: inline-block;
			opacity: .25;
		}
		&.next {
			left: 85%;
			display: inline-block;
			opacity: .25;
		}
		&.prev2 {
			left: -125%;
			display: inline-block;
			opacity: 0;
		}
		&.next2 {
			left: 155%;
			display: inline-block;
			opacity: 0;
		}
	}
}

Script

$('#carousel').fpcarousel();