<?php
$testimonials_slider = array(
array('name' => 'Susanne', 'subtitle' => 'Beautiful Lawn For Picky Purchasers' , 'value' => '<p>I was very impressed with the work Lazy Lawn did. They were very professional and after the job was done my lawn looked better than ever.</p><p>I was very impressed with the work Lazy Lawn did. They were very professional and after the job was done my lawn looked better than ever.</p>'),
array('name' => 'Dave B.', 'subtitle' => 'Beautiful Lawn For Picky Purchasers' , 'value' => '<p>I am extremely satisfied and proud of the work that Lazy Lawn did in my yard. It\'s made me feel great about going in my yard again - a world of difference. I can\'t say enough about the professionalism and quality of this company. I am extremely satisfied and proud of the work that Lazy Lawn did in my yard. It\'s made me feel great about going in my yard again - a world of difference. I can\'t say enough about the professionalism and quality of this company. I am extremely satisfied and proud of the work that Lazy Lawn did in my yard. It\'s made me feel great about going in my yard again - a world of difference. I can\'t say enough about the professionalism and quality of this company</p>'),
array('name' => 'Feng', 'subtitle' => 'Beautiful Lawn For Picky Purchasers' , 'value' => '<p>Bran and the Lazy Lawn team did an exceptional job in our backyard. The project was postponed do to rain a few times, but my wife and I couldn\'t be happy with the final outcome. Would highly recommend this company.</p>'),
array('name' => 'Chris', 'subtitle' => 'Beautiful Lawn For Picky Purchasers' , 'value' => '<p>We love the lawn. Bran worked hard to make sure that we were happy. There were some problems initially, but he was dedicated to the job and ensured that the lawn met our expectations</p>')
);
?>
<section class="testimonials">
<div class="wrapper">
<div class="tc">
<h2>What People Say</h2>
</div>
<div class="testimonials_slider hidden_slider" data-slider="testimonials_slider">
<?php foreach ($testimonials_slider as $item): ?>
<div class="testimonials_item">
<div class="desc">
<h4><?= $item['subtitle'] ?></h4>
<div class="text"><?= $item['value'] ?></div>
</div>
<p class="name"><?= $item['name'] ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
</section>.testimonials{background:#f5f5f5;padding:3rem 0 5rem}
.testimonials h2,.testimonials .h2{font-size:4rem;color:#006b25;margin:0 0 4.5rem}
.testimonials .testimonials_slider.hidden_slider{overflow:hidden;max-height:21.2rem;opacity:0}
.testimonials .testimonials_slider .slick-next,.testimonials .testimonials_slider .slick-prev{width:5rem;height:5rem;display:block;position:absolute;top:45%;-webkit-transform:translate(0,-45%);-moz-transform:translate(0,-45%);-ms-transform:translate(0,-45%);-o-transform:translate(0,-45%);transform:translate(0,-45%);z-index:5}
.testimonials .testimonials_slider .slick-next::after,.testimonials .testimonials_slider .slick-prev::after{border-color:#c4c4c4;width:5rem;height:5rem}
.testimonials .testimonials_slider .slick-prev{left:-3.5rem}
.testimonials .testimonials_slider .slick-next{right:-3.5rem}
.testimonials .testimonials_slider .slick-track{display:-webkit-box!important;display:-webkit-flex!important;display:-moz-box!important;display:-ms-flexbox!important;display:flex!important}
.testimonials .testimonials_slider .slick-track .slick-slide{display:-webkit-box!important;display:-webkit-flex!important;display:-moz-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:auto!important}
.testimonials .testimonials_slider .testimonials_item{position:relative}
.testimonials .testimonials_slider .testimonials_item p.name{font-size:2rem;line-height:1.2;font-weight:700;color:#006b25;position:absolute;left:6rem;bottom:1rem;margin:0}
.testimonials .testimonials_slider .desc{background:#fff url(/img/border2.png) no-repeat;-webkit-background-size:100% 100%;-moz-background-size:100% 100%;-o-background-size:100% 100%;background-size:100% 100%;margin:0 2.5rem 6rem;padding:3rem;height:100%;position:relative}
.testimonials .testimonials_slider .desc:after{content:'';display:block;position:absolute;left:3rem;bottom:-2rem;width:0;height:0;border-left:2rem solid transparent;border-right:2rem solid transparent;border-top:2rem solid #fff}
.testimonials .testimonials_slider .desc .text{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.testimonials .testimonials_slider .desc h4{font-weight:700;font-size:2.5rem;color:#006b25;line-height:1.2;margin:1rem 0 0}
.testimonials .testimonials_slider .desc p{font-size:1.6rem;line-height:1.5}
@media only screen and (max-width: 1400px) {
.testimonials_slider{max-width:90%;margin:0 auto}
.testimonials .testimonials_slider .slick-next,.testimonials .testimonials_slider .slick-prev,.testimonials .testimonials_slider .slick-next::after,.testimonials .testimonials_slider .slick-prev::after{width:4rem;height:4rem}
}
@media only screen and (max-width: 992px) {
.testimonials .testimonials_slider .desc{margin:0 1.5rem 6rem;padding:2.5rem}
.testimonials .testimonials_slider .desc h4{font-size:2.2rem}
.testimonials .testimonials_slider .testimonials_item p.name{left:5rem;font-size:1.8rem}
.testimonials h2,.testimonials .h2{font-size:4rem}
.testimonials{padding:3rem 0}
}
@media only screen and (max-width: 700px) {
.testimonials{padding:3rem 0 5rem}
.testimonials h2,.testimonials .h2{font-size:4rem}
.testimonials_slider{max-width:100%}
.testimonials .testimonials_slider .desc h4{font-size:2rem;margin:0}
.testimonials .testimonials_slider .desc p{font-size:1.4rem}
.testimonials .testimonials_slider .desc:after{left:50%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}
.testimonials .testimonials_slider .testimonials_item p.name{position:static;text-align:center;max-width:60%;margin:0 auto}
.testimonials .testimonials_slider .desc{max-width:80%;margin:0 auto 3rem}
.testimonials .testimonials_slider .slick-prev{left:3.5rem}
.testimonials .testimonials_slider .slick-next{right:3.5rem}
.testimonials .testimonials_slider .slick-next,.testimonials .testimonials_slider .slick-prev{top:auto;bottom:-3rem}
}
@media only screen and (max-width: 450px) {
.testimonials .testimonials_slider .desc h4{font-size:1.8rem}
}.testimonials {
background: #f5f5f5;
padding: 3rem 0 5rem;
h2, .h2 {
font-size: 4rem;
color: #006b25;
margin: 0 0 4.5rem;
}
.testimonials_slider {
&.hidden_slider {
overflow: hidden;
max-height: 21.2rem;
opacity: 0;
}
.slick-next, .slick-prev {
width: 5rem;
height: 5rem;
display: block;
position: absolute;
top: 45%;
transform: translate(0, -45%);
z-index: 5;
&::after {
border-color: #c4c4c4;
width: 5rem;
height: 5rem;
}
}
.slick-prev {
left: -3.5rem;
}
.slick-next {
right: -3.5rem;
}
.slick-track {
display: flex !important;
.slick-slide {
display: flex !important;
flex-direction: column;
height: auto !important;
}
}
.testimonials_item {
position: relative;
p.name {
font-size: 2rem;
line-height: 1.2;
font-weight: 700;
color: #006b25;
position: absolute;
left: 6rem;
bottom: 1rem;
margin: 0;
}
}
.desc {
background: #fff url(/img/border2.png) no-repeat;
background-size: 100% 100%;
margin: 0 2.5rem 6rem;
padding: 3rem;
height: 100%;
position: relative;
&:after {
content: '';
display: block;
position: absolute;
left: 3rem;
bottom: -2rem;
width: 0;
height: 0;
border-left: 2rem solid transparent;
border-right: 2rem solid transparent;
border-top: 2rem solid #fff;
}
.text {
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
h4 {
font-weight: 700;
font-size: 2.5rem;
color: #006b25;
line-height: 1.2;
margin: 1rem 0 0;
}
p {
font-size: 1.6rem;
line-height: 1.5;
}
}
}
}
@media only screen and (max-width: 1400px) {
.testimonials_slider {max-width: 90%; margin: 0 auto}
.testimonials .testimonials_slider .slick-next, .testimonials .testimonials_slider .slick-prev,.testimonials .testimonials_slider .slick-next::after, .testimonials .testimonials_slider .slick-prev::after {width: 4rem;height: 4rem;}
}
@media only screen and (max-width: 992px) {
.testimonials .testimonials_slider .desc {margin: 0 1.5rem 6rem;padding: 2.5rem}
.testimonials .testimonials_slider .desc h4 {font-size: 2.2rem;}
.testimonials .testimonials_slider .testimonials_item p.name {left: 5rem;}
.testimonials .testimonials_slider .testimonials_item p.name {font-size: 1.8rem;}
.testimonials h2, .testimonials .h2 {font-size: 4rem}
.testimonials {padding: 3rem 0;}
}
@media only screen and (max-width: 700px) {
.testimonials {padding: 3rem 0 5rem;}
.testimonials h2, .testimonials .h2 {font-size: 4rem;}
.testimonials_slider {max-width: 100%}
.testimonials .testimonials_slider .desc h4 {font-size: 2rem;margin: 0}
.testimonials .testimonials_slider .desc p {font-size: 1.4rem}
.testimonials .testimonials_slider .desc:after {left: 50%;transform: translate(-50%, 0);}
.testimonials .testimonials_slider .testimonials_item p.name {position: static;text-align: center;max-width: 60%; margin: 0 auto}
.testimonials .testimonials_slider .desc {max-width:80%;margin: 0 auto 3rem;}
.testimonials .testimonials_slider .slick-prev {left: 3.5rem;}
.testimonials .testimonials_slider .slick-next {right: 3.5rem;}
.testimonials .testimonials_slider .slick-next, .testimonials .testimonials_slider .slick-prev {top: auto; bottom: -3rem}
}
@media only screen and (max-width: 450px) {
.testimonials .testimonials_slider .desc h4 {font-size: 1.8rem;}
}$('.testimonials_slider').slick({
arrows: true,
dots: false,
infinite: true,
autoplay: false,
autoplaySpeed: 5000,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [
{
breakpoint: 701,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});