Reviews Slider

What People Say

Happy Monday Mike. Thanks kindly. Had my first sauna yesterday. Looks great and feels great. A warm thanks to Vlad and his attention to detail. Wonderful job. I have what I need in the beautiful sauna your company has provided. I’ll take the $125 credit via cheque. Once again thanks kindly for a smooth fantastic job.

February 04, 2019

Steven Milincevich

Choosing them was the best decision, when it came to quality, performance and pricing. I got more than expected!

March 03, 2020

Person 2

PHP

<?php
	$reviews_slider = array(
		array('name' => 'Steven Milincevich', 'date' => 'February 04, 2019', 'value' => '<p>Happy Monday Mike. Thanks kindly. Had my first sauna yesterday. Looks great and feels great. A warm thanks to Vlad and his attention to detail. Wonderful job. I have what I need in the beautiful sauna your company has provided. I’ll take the $125 credit via cheque. Once again thanks kindly for a smooth fantastic job.</p>'),
		array('name' => 'Person 2', 'date' => 'March 03, 2020', 'value' => '<p>Choosing them was the best decision, when it came to quality, performance and pricing. I got more than expected!</p>')
	);
?>

<section class="reviews" style="background-image: url('/img/reviews_bg.jpg');">
	<div class="wrapper">
		<div class="tc">
			<h2>What People Say</h2>
		</div>
		<div class="reviews_slider hidden_slider" data-slider="reviews_slider">
			<?php foreach ($reviews_slider as $item): ?>
				<div>
					<div class="reviews_item">
						<div class="desc"><?= $item['value'] ?></div>
						<div class="details">
							<p class="date"><?= $item['date'] ?></p>
							<p class="name"><?= $item['name'] ?></p>
						</div>
						<div class="stars">
							<?php for ($i = 0; $i < 5; $i++) :?>
								<div class="star"></div>
							<?php endfor ;?>
						</div>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>

CSS

.reviews{padding:8rem 0 6rem;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center top;position:relative;z-index:2}
.reviews:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(239,239,239,0.8);z-index:-1}
.reviews h2,.reviews .h2{font:400 5rem/1.2 'Nunito Sans',sans-serif;margin:0 0 4rem}

.reviews .reviews_slider{margin:0 auto;max-width:77%}
.reviews .reviews_slider.hidden_slider{overflow:hidden;max-height:64rem;opacity:0}
.reviews .reviews_slider .reviews_item{text-align:center}
.reviews .reviews_slider .reviews_item .desc p{font-size:2.5rem;font-family:'Libre Baskerville',serif}
.reviews .reviews_slider .reviews_item .details{margin:2.9rem 0 4.7rem}
.reviews .reviews_slider .reviews_item .details p{margin:0}
.reviews .reviews_slider .reviews_item .details p.date{font-size:1.6rem;font-weight:500;text-transform:uppercase}
.reviews .reviews_slider .reviews_item .details p.name{font-size:2.1rem;font-weight:700}
.reviews .reviews_slider .reviews_item .stars{margin:0 auto 3rem;text-align:center}

.reviews .reviews_slider .slick-prev,.reviews .reviews_slider .slick-next{width:6rem;height:6rem;top:34%}
.reviews .reviews_slider .slick-prev::after,.reviews .reviews_slider .slick-next::after{border-color:#09a5be;width:6rem;height:6rem}
.reviews .reviews_slider .slick-prev{left:-15.5rem}
.reviews .reviews_slider .slick-next{right:-15.5rem}
.reviews .reviews_slider .slick-dots{bottom:-3rem}
.reviews .reviews_slider .slick-dots li{border-color:#09a5be}
.reviews .reviews_slider .slick-dots li.slick-active{background:#09a5be}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.reviews .reviews_slider .slick-prev:hover::after,.reviews .reviews_slider .slick-next:hover::after{border-color:#066978}
}

@media only screen and (max-width: 1300px) {
	.reviews h2,.reviews .h2{font-size:4rem;margin:0 0 2rem}
	.reviews .reviews_slider .reviews_item .details{margin:2rem 0 3rem}
	.reviews .reviews_slider .reviews_item .desc p{font-size:2.2rem}
}

@media only screen and (max-width: 992px) {
	.reviews{padding:4rem 0 4.5rem}
	.reviews .reviews_slider{max-width:90%}
	.reviews .reviews_slider .reviews_item .desc p{font-size:1.8rem}
	.reviews .reviews_slider .slick-dots{bottom:-2.5rem}
}

@media only screen and (max-width: 767px) {
	.reviews h2,.reviews .h2{font-size:3rem;margin:0 0 1rem}
	.reviews .reviews_slider .reviews_item .desc p{font-size:1.6rem}
	.reviews .reviews_slider .reviews_item .details p.date{font-size:1.4rem}
	.reviews .reviews_slider .reviews_item .details p.name{font-size:1.8rem}
	.reviews .reviews_slider .reviews_item .details{margin:2rem 0 1rem}
	.reviews .reviews_slider .reviews_item .stars{margin:0 auto 1rem}
}

@media only screen and (max-width: 550px) {
	.reviews .reviews_slider{max-width:100%}
}

SCSS

/* Vars */
$font:           'Nunito Sans', sans-serif;
$fontReviews:    'Libre Baskerville', serif;
$main:            #09a5be;
$dark:            #066978;
$grey2:           #efefef;

.reviews {
	padding: 8rem 0 6rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	position: relative;
	z-index: 2;
	
	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba($grey2, 0.8);
		z-index: -1;
	}
	
	h2, .h2 {
		font: 400 5rem/1.2 $font;
		margin: 0 0 4rem;
	}
	
	.reviews_slider {
		margin: 0 auto;
		max-width: 77%;
		
		&.hidden_slider {
			overflow: hidden;
			max-height: 64rem;
			opacity: 0;
		}
		
		.reviews_item {
			text-align: center;
			
			.desc {
				
				p {
					font-size: 2.5rem;
					font-family: $fontReviews;
				}
			}
			
			.details {
				margin: 2.9rem 0 4.7rem;
				
				p {
					margin: 0;
					
					&.date {
						font-size: 1.6rem;
						font-weight: 500;
						text-transform: uppercase;
					}
					
					&.name {
						font-size: 2.1rem;
						font-weight: 700;
					}
				}
			}
			
			.stars {
				margin: 0 auto 3rem;
				text-align: center;
			}
		}
		
		.slick-prev, .slick-next {
			width: 6rem;
			height: 6rem;
			top: 34%;
			
			
			&::after {
				border-color: $main;
				width: 6rem;
				height: 6rem;
			}
		}
		
		.slick-prev {
			left: -15.5rem;
		}
		
		.slick-next {
			right: -15.5rem;
		}
		
		.slick-dots {
			bottom: -3rem;
			li {
				border-color: $main;
				&.slick-active {
					background: $main;
				}
			}
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.reviews .reviews_slider .slick-prev:hover::after, .reviews .reviews_slider .slick-next:hover::after {
		border-color: $dark;
	}
}

@media only screen and (max-width: 1300px) {
	.reviews h2, .reviews .h2 {font-size: 4rem;margin: 0 0 2rem;}
	.reviews .reviews_slider .reviews_item .details {margin: 2rem 0 3rem;}
	.reviews .reviews_slider .reviews_item .desc p {font-size: 2.2rem;}
}

@media only screen and (max-width: 992px) {
	.reviews {padding: 4rem 0 4.5rem;}
	.reviews .reviews_slider {max-width: 90%;}
	.reviews .reviews_slider .reviews_item .desc p {font-size: 1.8rem;}
	.reviews .reviews_slider .slick-dots {bottom: -2.5rem;}
}

@media only screen and (max-width: 767px) {
	.reviews h2, .reviews .h2 {font-size: 3rem;margin: 0 0 1rem;}
	.reviews .reviews_slider .reviews_item .desc p {font-size: 1.6rem;}
	.reviews .reviews_slider .reviews_item .details p.date {font-size: 1.4rem;}
	.reviews .reviews_slider .reviews_item .details p.name {font-size: 1.8rem;}
	.reviews .reviews_slider .reviews_item .details {margin: 2rem 0 1rem;}
	.reviews .reviews_slider .reviews_item .stars {margin: 0 auto 1rem;}
}

@media only screen and (max-width: 550px) {
	.reviews .reviews_slider {max-width: 100%;}
}

JavaScript

$('.reviews_slider').slick({
	arrows: true,
	dots: true,
	infinite: true,
	autoplay: false,
	slidesToShow: 1,
	slidesToScroll: 1,
	responsive: [
		{
			breakpoint: 1301,
			settings: {
				arrows: false
			}
		}
	]
});