Reviews Slider 3 Items

What Our Customers Say

It’s easy to spot passionate and driven professionals like the principals of Dancon. They are active members of the TCA and very much involved in the industry. I’ve personally witnessed how smoothly they run a construction project and lead crews. Their commitment to excellence and unique business offering is the secret sauce to become a powerhouse in the commercial interior renovation market.

John Mollenhauer,

Toronto Construction Association

When VR Vision needed to relocate to a new office, we had a hard time finding a space that was exactly what we needed. We hired Dancon to renovate the space, and now we have an office that compliments the way we work. Dancon's work is high quality, they finished ahead of schedule, and we are very happy with the costs and clean finish. Highly recommend.

Roni Cerga,

VR Vision Group

Absolutely amazing fit-out team! If you want your project to run smoothly, on budget and deal with talented and exciting people, call Dancon.

Michelle Goodridge,

RE/MAX Integra

Working with Dancon on our office fit-out project was a great experience from start to finish. Our occupied space required careful scheduling with minimal disruption and a fast handover. Highly impressed by their professionalism and ability to make the renovation process less stressful than anticipated. Even when we threw some last-minute curveballs, Dancon was happy to accommodate and keep us satisfied. Highly recommended.”

Romeo Milano,

Safetech Environmental Ltd

We hired Dancon to help us design and build our wellness clinic on Gerrard St E. Our budget was tight, and our timeline was short. Dancon was able to complete our project in just one month. We are highly impressed by the combination of speed, quality of work, and ability to stay in budget.

Hayhlee Clarence,

Orenda Clinic & Apothecary

PHP

<?php
	$recent_reviews = array(
		array('name' => 'John Mollenhauer', 'company' => 'Toronto Construction Association', 'value' => '<p>It’s easy to spot passionate and driven professionals like the principals of Dancon. They are active members of the TCA and very much involved in the industry. I’ve personally witnessed how smoothly they run a construction project and lead crews. Their commitment to excellence and unique business offering is the secret sauce to become a powerhouse in the commercial interior renovation market.</p>'),
		array('name' => 'Roni Cerga', 'company' => 'VR Vision Group', 'value' => '<p>When VR Vision needed to relocate to a new office, we had a hard time finding a space that was exactly what we needed. We hired Dancon to renovate the space, and now we have an office that compliments the way we work. Dancon\'s work is high quality, they finished ahead of schedule, and we are very happy with the costs and clean finish. Highly recommend.</p>'),
		array('name' => 'Michelle Goodridge', 'company' => 'RE/MAX Integra', 'value' => '<p>Absolutely amazing fit-out team! If you want your project to run smoothly, on budget and deal with talented and exciting people, call Dancon.</p>'),
		array('name' => 'Romeo Milano', 'company' => 'Safetech Environmental Ltd', 'value' => '<p><i>Working with Dancon on our office fit-out project was a great experience from start to finish. Our occupied space required careful scheduling with minimal disruption and a fast handover. Highly impressed by their professionalism and ability to make the renovation process less stressful than anticipated. Even when we threw some last-minute curveballs, Dancon was happy to accommodate and keep us satisfied. Highly recommended.”</i></p>'),
		array('name' => 'Hayhlee Clarence', 'company' => 'Orenda Clinic & Apothecary', 'value' => '<p>We hired Dancon to help us design and build our wellness clinic on Gerrard St E. Our budget was tight, and our timeline was short. Dancon was able to complete our project in just one month. We are highly impressed by the combination of speed, quality of work, and ability to stay in budget. </p>')
	);
?>
	
<section class="recent_reviews" style="background-image:url('/img/review.jpg');">
	<div class="wrapper">
		<div class="review_heading">
			<h2>What Our Customers Say</h2>
		</div>
		
		<div class="reviews_arrows_wrap">
			<div class="prev_slide">
				<?= svg('iconLeftArrow','') ?>
			</div>
			<div class="next_slide">
				<?= svg('iconRightArrow','') ?>
			</div>
		</div>
	</div>
	<div class="wrapper_full">
		<div class="recent_reviews_slider hidden_slider" data-slider="recent_reviews_slider">
			<?php foreach ($recent_reviews as $item): ?>
				<div class="review_item">
					<?= svg('iconQuotationMark','quotes') ?>
					<?= $item['value'] ?>
					<div class="names">
						<p class="name"><?= $item['name'] ?>,</p>
						<p><?= $item['company'] ?></p>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>

CSS

.recent_reviews{padding:10rem 0 5rem;position:relative;background-repeat:no-repeat;-webkit-background-size:58% auto;-moz-background-size:58% auto;-o-background-size:58% auto;background-size:58% auto;background-position:right top}
.recent_reviews .review_heading{width:35%;max-width:35%}
.recent_reviews .review_heading h2,.recent_reviews .review_heading .h2{font-size:4.2rem;line-height:1.2;color:#21244f;position:relative;margin:0}

.recent_reviews .reviews_arrows_wrap{margin:5rem 0 9rem;font-size:0}
.recent_reviews .reviews_arrows_wrap .prev_slide,.recent_reviews .reviews_arrows_wrap .next_slide{display:inline-block;width:7rem;height:7rem;background-color:#d6d6d6;border:.1rem solid #d6d6d6;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;position:relative;-webkit-transition:all .2s ease-in;-o-transition:all .2s ease-in;-moz-transition:all .2s ease-in;transition:all .2s ease-in;z-index:2;cursor:pointer}
.recent_reviews .reviews_arrows_wrap .prev_slide .icon,.recent_reviews .reviews_arrows_wrap .next_slide .icon{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:2.3rem;height:2.3rem}
.recent_reviews .reviews_arrows_wrap .prev_slide{margin:0 3rem 0 0}

.recent_reviews .recent_reviews_slider.hidden_slider{opacity:0;overflow:hidden;max-height:50rem}
.recent_reviews .recent_reviews_slider .slick-list{max-width:83%;margin-left:auto}
.recent_reviews .recent_reviews_slider .review_item{padding:11rem 4.6rem 13rem 5.1rem;background-color:#fff;display:block;margin:0 1rem 2rem;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:relative;-webkit-box-shadow:0 2px 8px rgba(0,0,0,0.15);-moz-box-shadow:0 2px 8px rgba(0,0,0,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.recent_reviews .recent_reviews_slider .review_item.slick-current{background-color:#f15929;-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}
.recent_reviews .recent_reviews_slider .review_item.slick-current .quotes,.recent_reviews .recent_reviews_slider .review_item.slick-current p{color:#fff}
.recent_reviews .recent_reviews_slider .review_item .quotes{position:absolute;top:5rem;left:5.1rem;font-size:3.2rem;color:#f15929}
.recent_reviews .recent_reviews_slider .review_item p{margin:0;font-family:"Libre Baskerville";font-style:italic;height:14.7rem;overflow-x:hidden;padding:0 1rem 0 0;overflow-y:auto}
.recent_reviews .recent_reviews_slider .review_item p::-webkit-scrollbar-thumb{background:#f15929;-webkit-border-radius:1rem;border-radius:1rem}
.recent_reviews .recent_reviews_slider .review_item p::-webkit-scrollbar-track{background:#fff;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);box-shadow:inset 0 0 6px rgba(0,0,0,.3);-webkit-border-radius:1rem;border-radius:1rem}
.recent_reviews .recent_reviews_slider .review_item.slick-current p::-webkit-scrollbar-thumb{background:#fff}
.recent_reviews .recent_reviews_slider .review_item.slick-current p::-webkit-scrollbar-track{background:transparent}
.recent_reviews .recent_reviews_slider .review_item .names{position:absolute;left:5.1rem;bottom:3rem}
.recent_reviews .recent_reviews_slider .review_item .names p{font-size:1.4rem;font-family:"Poppins",sans-serif;padding:0;height:auto}
.recent_reviews .recent_reviews_slider .review_item .names .name{font-size:1.8rem;font-weight:700;font-style:normal;text-transform:uppercase;height:auto}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.recent_reviews .reviews_arrows_wrap .prev_slide:hover,.recent_reviews .reviews_arrows_wrap .next_slide:hover{background-color:#f15929}
	.recent_reviews .reviews_arrows_wrap .prev_slide:hover .icon,.recent_reviews .reviews_arrows_wrap .next_slide:hover .icon{color:#fff}
}

@media only screen and (max-width: 1300px) {
	.recent_reviews{padding:5rem 0;-webkit-background-size:64% auto;-moz-background-size:64% auto;-o-background-size:64% auto;background-size:64% auto}
	.recent_reviews .review_heading{width:30%;max-width:30%}
	.recent_reviews .review_heading h2,.recent_reviews .review_heading .h2{font-size:3.6rem}
	.recent_reviews .reviews_arrows_wrap{margin:5rem 0 6rem}
	.recent_reviews .recent_reviews_slider .slick-list{max-width:90%}
	.recent_reviews .recent_reviews_slider .review_item{padding:9rem 3rem 11rem}
	.recent_reviews .recent_reviews_slider .review_item .quotes{top:3rem;left:3rem}
	.recent_reviews .recent_reviews_slider .review_item .names{left:3rem;bottom:2rem}
}

@media only screen and (max-width: 992px) {
	.recent_reviews{padding:5rem 0 3rem;-webkit-background-size:69% auto;-moz-background-size:69% auto;-o-background-size:69% auto;background-size:69% auto}
	.recent_reviews .review_heading h2,.recent_reviews .review_heading .h2{font-size:3rem}
	.recent_reviews .reviews_arrows_wrap{margin:3rem 0}
	.recent_reviews .reviews_arrows_wrap .prev_slide{margin:0 2rem 0 0}
	.recent_reviews .reviews_arrows_wrap .prev_slide,.recent_reviews .reviews_arrows_wrap .next_slide{width:4.5rem;height:4.5rem}
	.recent_reviews .reviews_arrows_wrap .prev_slide .icon,.recent_reviews .reviews_arrows_wrap .next_slide .icon{width:1.8rem;height:1.8rem}
}

@media only screen and (max-width: 700px) {
	.recent_reviews{background-image:none!important;text-align:center;padding:3rem 0}
	.recent_reviews .review_heading{width:100%;max-width:100%}
	.recent_reviews .reviews_arrows_wrap{margin:3rem 0 1rem}
	.recent_reviews .recent_reviews_slider .slick-list{max-width:100%}
	.recent_reviews .recent_reviews_slider .review_item{padding:8.5rem 0 0;-webkit-box-shadow:unset;-moz-box-shadow:unset;box-shadow:unset}
	.recent_reviews .recent_reviews_slider .review_item.slick-current{background-color:#fff}
	.recent_reviews .recent_reviews_slider .review_item.slick-current p{color:#000}
	.recent_reviews .recent_reviews_slider .review_item .quotes,.recent_reviews .recent_reviews_slider .review_item.slick-current .quotes{color:#f15929;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}
	.recent_reviews .recent_reviews_slider .review_item .names{position:static;margin:1rem 0 0}
	.recent_reviews .recent_reviews_slider .review_item .names .name{color:#f15929}
	.recent_reviews .recent_reviews_slider .review_item.slick-current p::-webkit-scrollbar-thumb{background:#f15929}
	.recent_reviews_slider .review_item.slick-current p::-webkit-scrollbar-track{background:#fff}
}

SCSS

.recent_reviews {
	padding: 10rem 0 5rem;
	position: relative;
	background-repeat: no-repeat;
	background-size: 58% auto;
	background-position: right top;
	
	.review_heading {
		width: 35%;
		max-width: 35%;
		
		h2, .h2 {
			font-size: 4.2rem;
			line-height: 1.2;
			color: #21244f;
			position: relative;
			margin: 0;
		}
	}
	
	.reviews_arrows_wrap {
		margin: 5rem 0 9rem;
		font-size: 0;
		
		.prev_slide, .next_slide {
			display: inline-block;
			width: 7rem;
			height: 7rem;
			background-color: #d6d6d6;
			border: .1rem solid #d6d6d6;
			border-radius: 50%;
			position: relative;
			transition: all 0.2s ease-in;
			z-index: 2;
			cursor: pointer;
			
			.icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 2.3rem;
				height: 2.3rem;
			}
		}
		
		.prev_slide {
			margin: 0 3rem 0 0;
		}
	}
	
	
	.recent_reviews_slider .review_item p::-webkit-scrollbar-thumb {
		background: #f15929;
		border-radius: 1rem;
	}
	
	.recent_reviews_slider .review_item p::-webkit-scrollbar-track {
		background: #ffffff;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		border-radius: 1rem;
	}
	
	.recent_reviews_slider .review_item.slick-current p::-webkit-scrollbar-thumb {
		background: #ffffff;
	}
	
	.recent_reviews_slider .review_item.slick-current p::-webkit-scrollbar-track {
		background: transparent;
	}
	
	.recent_reviews_slider {
		&.hidden_slider {
			opacity: 0;
			overflow: hidden;
			max-height: 50rem;
		}
		
		.slick-list {
			max-width: 83%;
			margin-left: auto;
			
		}
		
		.review_item {
			padding: 11rem 4.6rem 13rem 5.1rem;
			background-color: #ffffff;
			display: block;
			margin: 0 1rem 2rem;
			border-radius: 3px;
			position: relative;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
			
			&.slick-current {
				background-color: #f15929;
				transition: all .3s ease-in;
				
				.quotes, p {
					color: #ffffff;
				}
			}
			
			.quotes {
				position: absolute;
				top: 5rem;
				left: 5.1rem;
				font-size: 3.2rem;
				color: #f15929;
			}
			
			p {
				margin: 0;
				font-family: "Libre Baskerville";
				font-style: italic;
				height: 14.7rem;
				overflow-x: hidden;
				padding: 0 1rem 0 0;
				overflow-y: auto;
			}
			
			.names {
				position: absolute;
				left: 5.1rem;
				bottom: 3rem;
				
				p {
					font-size: 1.4rem;
					font-family: "Poppins", sans-serif;
					padding: 0;
					height: auto;
				}
				
				.name {
					font-size: 1.8rem;
					font-weight: 700;
					font-style: normal;
					text-transform: uppercase;
					height: auto;
				}
			}
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.recent_reviews .reviews_arrows_wrap .prev_slide:hover, .recent_reviews .reviews_arrows_wrap .next_slide:hover {background-color: #f15929;}
	.recent_reviews .reviews_arrows_wrap .prev_slide:hover .icon, .recent_reviews .reviews_arrows_wrap .next_slide:hover .icon{color: #ffffff;}
}

@media only screen and (max-width: 1300px) {
	.recent_reviews {padding: 5rem 0;background-size: 64% auto;}
	.recent_reviews .review_heading {width: 30%;max-width: 30%;}
	.recent_reviews .review_heading h2, .recent_reviews .review_heading .h2 {font-size: 3.6rem;}
	.recent_reviews .reviews_arrows_wrap {margin: 5rem 0 6rem;}
	.recent_reviews .recent_reviews_slider .slick-list {max-width: 90%;}
	.recent_reviews .recent_reviews_slider .review_item {padding: 9rem 3rem 11rem;}
	.recent_reviews .recent_reviews_slider .review_item .quotes {top: 3rem;left: 3rem}
	.recent_reviews .recent_reviews_slider .review_item .names {left: 3rem;bottom: 2rem;}
}

@media only screen and (max-width: 992px) {
	.recent_reviews {padding: 5rem 0 3rem;background-size: 69% auto;}
	.recent_reviews .review_heading h2, .recent_reviews .review_heading .h2 {font-size: 3rem;}
	.recent_reviews .reviews_arrows_wrap {margin: 3rem 0;}
	.recent_reviews .reviews_arrows_wrap .prev_slide {margin: 0 2rem 0 0;}
	.recent_reviews .reviews_arrows_wrap .prev_slide, .recent_reviews .reviews_arrows_wrap .next_slide {width: 4.5rem;height: 4.5rem;}
	.recent_reviews .reviews_arrows_wrap .prev_slide .icon, .recent_reviews .reviews_arrows_wrap .next_slide .icon {width: 1.8rem;height: 1.8rem;}
}

@media only screen and (max-width: 700px) {
	.recent_reviews {background-image: none !important;text-align: center; padding: 3rem 0}
	.recent_reviews .review_heading {width: 100%;max-width: 100%;}
	.recent_reviews .reviews_arrows_wrap {margin: 3rem 0 1rem;}
	.recent_reviews .recent_reviews_slider .slick-list {max-width: 100%;}
	.recent_reviews .recent_reviews_slider .review_item {padding: 8.5rem 0 0;box-shadow: unset;}
	.recent_reviews .recent_reviews_slider .review_item.slick-current {background-color: #ffffff}
	.recent_reviews .recent_reviews_slider .review_item.slick-current p {color: #000000;}
	.recent_reviews .recent_reviews_slider .review_item .quotes, .recent_reviews .recent_reviews_slider .review_item.slick-current .quotes {color: #f15929;left: 50%;transform: translateX(-50%);}
	.recent_reviews .recent_reviews_slider .review_item .names {position: static;margin: 1rem 0 0}
	.recent_reviews .recent_reviews_slider .review_item .names .name {color: #f15929}
	.recent_reviews .recent_reviews_slider .review_item.slick-current p::-webkit-scrollbar-thumb {background: #f15929;}
	.recent_reviews_slider .review_item.slick-current p::-webkit-scrollbar-track {background: #ffffff;}
}

JavaScript

$('.recent_reviews_slider').slick({
	arrows: false,
	dots: false,
	infinite: true,
	autoplay: true,
	autoplaySpeed: 5000,
	slidesToShow: 3,
	slidesToScroll: 1,
	responsive: [
		{
			breakpoint: 1100,
			settings: {
				slidesToShow: 2,
				slidesToScroll: 1
			}
		},
		{
			breakpoint: 701,
			settings: {
				slidesToShow: 1,
				slidesToScroll: 1
			}
		}
	]
});

$(".next_slide").click(function() {
	$('.recent_reviews_slider').slick("slickNext");
});

$(".prev_slide").click(function(){
	$('.recent_reviews_slider').slick("slickPrev");
});