<div class="callout-text">
	<h4>Testimonials</h4>
	<div class="testimonial-carousel">
		<!-- Circled Left 2 icon by Icons8 -->
		<div class="icon-container">
			<span class="lnr lnr-arrow-left-circle"></span>
		</div>
		<div class="testimonial-items">
			<div class="testimonial-item first">
				<blockquote>
					<p class="testimonial-quote">Thank you very much for the great job you made of my cooker. You made a horrible job look easy and I can't thank you enough. I hate cleaning oven racks and they sparkle now. Thanks again.</p>
					<p class="testimonial-author"><cite>— H Scott, Edinburgh</cite></p>
				</blockquote>
			</div>
			<div class="testimonial-item second">
				<blockquote>
					<p class="testimonial-quote">Just a wee note to say 'WOW!' and thank you to you, and colleagues. Our old flat is sparkling and looks absolutely fantastic, I still can't believe how clean the oven is! Thanks so much again for all your hard work yesterday.</p>
					<p class="testimonial-author"><cite>— Nicola, Leith, Edinburgh</cite></p>
				</blockquote>
			</div>
			<div class="testimonial-item third">
				<blockquote>
					<p class="testimonial-quote">As mentioned I was very satisfied with the quality of the cleaning. The lady was very cheerful and enthusiastic. I will definitely consider using Quality Cleaning Services again.</p>
					<p class="testimonial-author"><cite>— W S Khan, Lothian Road, Edinburgh</cite></p>
				</blockquote>
			</div>
		</div>
		<!-- End .testimonial-items -->
		<div class="icon-container">
			<span class="lnr lnr-arrow-right-circle"></span>
		</div>
	</div>
</div>

<!-- <div class="next-button-container"><button id="button">Next >></button></div> -->
body {
	margin: 0;
	padding: 0;
}

h4 {
	font-family: 'Lato', sans-serif;
	font-size: 2em;
	@media (min-width: 768px) {
		font-size: 3em;
	}
}

.callout-text {
	text-align: center;
	max-width: 1140px;
	margin: 20px auto;
}

.testimonial-carousel {
	background-image: url("https://images.unsplash.com/photo-1489347215392-cee3b4f539aa?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
	height: 500px;
	position: relative;
	padding: 20px 0px;
	display: flex;
	.icon-container {
		position: relative;
		padding: 0 5px;
		max-width: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		@media (min-width: 768px) {
			max-width: 50px;
			padding: 0 10px;
		}
		span.lnr {
			color: #dadada;
			font-size: 1.6em;
			cursor: pointer;
			transition: color 0.3s linear;
			@media (min-width: 768px) {
				font-size: 2.6em;
			}
			&:hover {
				color: #fff;
			}
		}
	}
	p {
		font-family: 'Bad Script', cursive;
		font-size: 1em;
		@media (min-width: 768px) {
			font-size: 1.4em;
		}
	}
}

.testimonial-items {
	position: relative;
	flex: 1;
	overflow: hidden;
	color: #fff;
}

.testimonial-item {
	width: 100%;
	height: 100%;
	transition: transform 1s;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	p.testimonial-author {
		font-weight: bold;
		text-align: right;
	}
	&.first {
		left: 0;
	}
	&.second {
		left: 100%;
	}
	&.third {
		left: 200%;
	}
}
View Compiled
(function () {
	'use strict';
	var slides = document.querySelectorAll('.testimonial-item'),
		 button = document.getElementById('button'),
		 arrows = document.querySelectorAll('.lnr'),
		 carouselCount = 0,
		 scrollInterval,
		 interval = 5000;

	arrows[0].addEventListener('click', function (e) {
		e = e || window.event;
		e.preventDefault();
		carouselCount -= 100;
		slider();
		if (e.type !== 'autoClick') {
			clearInterval(scrollInterval);
			scrollInterval = setInterval(autoScroll, interval);
		}
	});
	arrows[1].addEventListener('click', sliderEvent);
	arrows[1].addEventListener('autoClick', sliderEvent);
	
	function sliderEvent(e) {
		e = e || window.event;
		e.preventDefault();
		carouselCount += 100;
		slider();
		if (e.type !== "autoClick") {
			clearInterval(scrollInterval);
			scrollInterval = setInterval(autoScroll, interval);
		}
	}
	
	function slider() {
		switch (carouselCount) {
			case -100:
				carouselCount = 0;
				break;
			case 300:
				carouselCount = 0;
				break;
			default:
				break;
		}
		console.log(carouselCount);
		for (var i = 0; i < slides.length; i += 1) {
			slides[i].setAttribute('style', 'transform:translateX(-' + carouselCount + '%)');
		}
	}
	
	// create new Event to dispatch click for auto scroll
	var autoClick = new Event('autoClick');
	function autoScroll() {
		arrows[1].dispatchEvent(autoClick);
	}
	
	// set timing of dispatch click events
	scrollInterval = setInterval(autoScroll, interval);
	
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.