Show Reviews Box on Home with Slider

<section class="recent-reviews">
<div class="container">
<div class="row">
<div class="title">Recent Reviews</div>
<div class="slides">
<div class="slide">
<div class="col-md-12">
<div class="item">
<div class="ico-wrapper">
<img src="http://localhost:8080/img/avatars/file.jpeg" alt="">
</div>
<div class="title">
<b>Adrian</b> reviewed a chumaround with <a href="#">Maya</a> in Medelin, Columbia
</div>
<div class="description">
<i class="fa fa-quote-left"></i>
<i class="fa fa-quote-right"></i>
<div>
We had a great time chumming around with Maya. Even though our group was comprised of people who ran the gamut of newcomers to old hands in San Francisco, she showed us parts of the city that none of us had seen, and gave us great suggestions for things to do for the rest of our time there. Her warm-hearted and smiling presence was a special bonus. Highly recommended!
</div>
</div>

<div class="clearfix">

<div class="stars">
<span class="star on"></span>
<span class="star on"></span>
<span class="star on"></span>
<span class="star on"></span>
<span class="star on"></span>
</div>
<a href="#" class="">View More</a>
</div>
</div>
</div>
</div>

<div class="slide">
<div class="col-md-12">
<div class="item">
<div class="ico-wrapper">
<img src="http://localhost:8080/img/avatars/jessica2.jpeg" alt="">
</div>
<div class="title">
<b>Adrian</b> reviewed a chumaround with <a href="#">Jessica</a> in Kiev, Ukraine
</div>
<div class="description">
<i class="fa fa-quote-left"></i>
<i class="fa fa-quote-right"></i>
<div>
She is super knowledgeable and engaged and cracks jokes, and generally kept things lively and moving. I was surprised how fast the chum around was over. I would definitely book her, learn everything you can, and use the knowledge and its guide to decide things you'd like to explore more in-depth on your own.
</div>
</div>

<div class="clearfix">

<div class="stars">
<span class="star on"></span>
<span class="star on"></span>
<span class="star on"></span>
<span class="star on"></span>
<span class="star on"></span>
</div>
<a href="#" class="">View More</a>
</div>
</div>
</div>
</div>

<div class="slide">
<div class="col-md-12">
<div class="item">
<div class="ico-wrapper">
<img src="http://localhost:8080/img/avatars/Amy_Denning.jpg" alt="">
</div>
<div class="title">
<b>Adrian</b> reviewed a chumaround with <a href="#">Sabrina</a> in Barcelona, Spain
</div>
<div class="description">
<i class="fa fa-quote-left"></i>
<i class="fa fa-quote-right"></i>
<div>
Sabrina was an amazing guide and a great story teller! We drove to some beautiful corners of San Francisco and Sausalito, she shared lots of info about the places we were driving through and he even helped me pick some fine Californian wines to bring back home. Thank you Sabrina, I truly enjoyed this experience and hope to see you the next time I’ll be in town :-)
</div>
</div>

<div class="clearfix">

<div class="stars">
<span class="star on"></span>
<span class="star on"></span>
<span class="star on"></span>
<span class="star on"></span>
<span class="star on"></span>
</div>
<a href="#" class="">View More</a>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</section>



section.recent-reviews {
  background-color: #F2F2F2;
  padding-bottom: 33px; }
section.recent-reviews .title {
  padding: 30px 0;
  /*padding-bottom: 0;*/
  font-family: "ProximaNova Regular";
  text-transform: uppercase;
  font-size: 23px;
  font-weight: bold;
  text-align: center; }

section.recent-reviews .slide .title {
  font-size: 15px;
  text-transform: none;
}
section.recent-reviews .slide .description {
  position: relative;
  /*border-bottom: 1px solid #f0eeee;*/
  line-height: 20px;
  height: 240px;
  padding: 0 14px;
  padding-top: 0;
  font-size: 15px;
  word-wrap: break-word;
  word-break: break-word;
  /*margin: 5px 0;*/
  overflow: hidden;
  text-overflow: ellipsis;
}

section.recent-reviews .description .fa-quote-left {
  position: absolute;
  top: 0;
  left: 0;
}
section.recent-reviews .description .fa-quote-right {
  position: absolute;
  bottom: 0;
  right: 0;
}
section.recent-reviews .item {
  text-align: center;
  background-color: #fff;
  padding: 20px; }
section.recent-reviews .item .ico-wrapper {
  font-size: 40px;
  text-align: center;
}
section.recent-reviews .item .ico-wrapper img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: inline-block;
}
section.recent-reviews .item .title {
  font-size: 16px;
  font-weight: normal;
  padding: 15px 0; }
section.recent-reviews .item p {
  font-family: "ProximaNova Regular";
  font-size: 16px; }

section.recent-reviews .stars {
  margin-bottom: 10px;
  margin-top: 10px;
}


if ($('.recent-reviews').length > 0) {
$('.recent-reviews .slides').slick({
adaptiveHeight: true,
autoplay: true,
slidesToShow: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}

Comments

Popular posts from this blog

Check Your ageInDays by Javascript