Simple jQuery testimonial carousel

index.html

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<section id="testimonials" class="marginTop100">
  <div class="container">
    <a href="#" id="previous"><i class="white fa fa-chevron-left fa-2x"></i></a>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <h2 class="white">IT professionals love Goverlan</h2>
      </div>
    </div>
    <div id="slider1" class="row" style="margin-top:25px">
      <div class="col-md-4">
        <blockquote>
          &ldquo;Brings every aspect of managing endpoints on your network into one easy intuitive tool. Makes software management and deployment a breeze, for the price and features you are missing out if you don't buy it.&rdquo;
        </blockquote>
        <div class="testimonialArrow"></div>
        <div>
          <img class="user-avatar" src="//dev.goverlan.com/img/index/keith1987.jpg" alt="user testimonial" width="50" height="50" />
          <div class="author">
            <span>Keith1987</span>
            <br />Spiceworks
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <blockquote>
          &ldquo;Goverlan has turned long hours of individual machine administration into single action updates, and made it so simple for us to keep our more than 1750 computers running with fewer hitches than before ...making our jobs easier.&rdquo;
        </blockquote>
        <div class="testimonialArrow"></div>
        <div>
          <img class="user-avatar" src="//dev.goverlan.com/img/index/john-wilkins.jpg" alt="user testimonial" width="50" height="50" />
          <div class="author">
            <span>John Wilkins</span>
            <br />Spiceworks
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <blockquote>
          &ldquo;Goverlan is a fantastic remote administration tool. I've been using it since 2006. We make a lot of use of the scope actions to deploy software. It allows you to easily manage virtually every element of a remote machine.&rdquo;
        </blockquote>
        <div class="testimonialArrow"></div>
        <div>
          <img class="user-avatar" src="//dev.goverlan.com/img/index/andrew-single.jpg" alt="user testimonial" width="50" height="50" />
          <div class="author">
            <span>Andrew Single</span>
            <br />Spiceworks
          </div>
        </div>
      </div>
    </div>
    <div id="slider2" class="row" style="margin-top:25px">
      <div class="col-md-4">
        <blockquote>
          &ldquo;Goverlan has turned long hours of individual machine administration into single action updates, and made it so simple for us to keep our more than 1750 computers running with fewer hitches than before ...making our jobs easier.&rdquo;
        </blockquote>
        <div class="testimonialArrow"></div>
        <div>
          <img class="user-avatar" src="//dev.goverlan.com/img/index/john-wilkins.jpg" alt="user testimonial" width="50" height="50" />
          <div class="author">
            <span>John Wilkins</span>
            <br />Spiceworks
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <blockquote>
          &ldquo;Goverlan is a fantastic remote administration tool. I've been using it since 2006. We make a lot of use of the scope actions to deploy software. It allows you to easily manage virtually every element of a remote machine.&rdquo;
        </blockquote>
        <div class="testimonialArrow"></div>
        <div>
          <img class="user-avatar" src="//dev.goverlan.com/img/index/andrew-single.jpg" alt="user testimonial" width="50" height="50" />
          <div class="author">
            <span>Andrew Single</span>
            <br />Spiceworks
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <blockquote>
          &ldquo;Brings every aspect of managing endpoints on your network into one easy intuitive tool. Makes software management and deployment a breeze, for the price and features you are missing out if you don't buy it.&rdquo;
        </blockquote>
        <div class="testimonialArrow"></div>
        <div>
          <img class="user-avatar" src="//dev.goverlan.com/img/index/keith1987.jpg" alt="user testimonial" width="50" height="50" />
          <div class="author">
            <span>Keith1987</span>
            <br />Spiceworks
          </div>
        </div>
      </div>
    </div>
    <div id="slider3" class="row" style="margin-top:25px">
      <div class="col-md-4">
        <blockquote>
          &ldquo;Brings every aspect of managing endpoints on your network into one easy intuitive tool. Makes software management and deployment a breeze, for the price and features you are missing out if you don't buy it.&rdquo;
        </blockquote>
        <div class="testimonialArrow"></div>
        <div>
          <img class="user-avatar" src="//dev.goverlan.com/img/index/keith1987.jpg" alt="user testimonial" width="50" height="50" />
          <div class="author">
            <span>Keith1987</span>
            <br />Spiceworks
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <blockquote>
          &ldquo;Goverlan has turned long hours of individual machine administration into single action updates, and made it so simple for us to keep our more than 1750 computers running with fewer hitches than before ...making our jobs easier.&rdquo;
        </blockquote>
        <div class="testimonialArrow"></div>
        <div>
          <img class="user-avatar" src="//dev.goverlan.com/img/index/john-wilkins.jpg" alt="user testimonial" width="50" height="50" />
          <div class="author">
            <span>John Wilkins</span>
            <br />Spiceworks
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <blockquote>
          &ldquo;Goverlan is a fantastic remote administration tool. I've been using it since 2006. We make a lot of use of the scope actions to deploy software. It allows you to easily manage virtually every element of a remote machine.&rdquo;
        </blockquote>
        <div class="testimonialArrow"></div>
        <div>
          <img class="user-avatar" src="//dev.goverlan.com/img/index/andrew-single.jpg" alt="user testimonial" width="50" height="50" />
          <div class="author">
            <span>Andrew Single</span>
            <br />Spiceworks
          </div>
        </div>
      </div>
    </div>
    <div class="row" style="margin: 25px auto 0 auto; text-align:center;">
      <a class="spiceworks-btn" href="//community.spiceworks.com/product/24101-goverlan-remote-administration-suite" target="_blank"><img src="//dev.goverlan.com/img/logos/spiceworks-logo.png" width="200" height="34" style="width:200px;" alt="spiceworks reviews" />
      </a>
    </div>
    <a href="#" id="next"><i class="white fa fa-chevron-right fa-2x"></i></a>
  </div>
</section>

script.js

$(document).ready(function() {

  $("#next").on("click", function() {
    if($('#slider1').is(':visible')) {
      $("#slider1").css("display", "none");
      $("#slider2").css("display", "block");
      $(".fa-chevron-left").css({
        opacity: 1,
        cursor: "pointer"
      });
    }
    else if($('#slider2').is(':visible')) {
      $("#slider2").css("display", "none");
      $(".fa-chevron-right").css({
        opacity: 0.3,
        cursor: "default"
      });
      $("#slider3").css("display", "block");
    }
  });

  $("#previous").on("click", function() {
    if($('#slider3').is(':visible')) {
      $("#slider3").css("display", "none");
      $("#slider2").css("display", "block");
      $(".fa-chevron-right").css({
        opacity: 1,
        cursor: "pointer"
      });
    }
    else if($('#slider2').is(':visible')) {
      $("#slider2").css("display", "none");
      $(".fa-chevron-left").css({
        opacity: 0.3,
        cursor: "default"
      });
      $("#slider1").css("display", "block");
    }
  });

});

Simple-jQuery-testimonial-carousel.markdown

Simple jQuery testimonial carousel

Lightweight, no animation, easy-to-use jQuery slider. No need for unordered lists or changing HTML markup.

A Pen by Meghan on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
  font-family: Lato, sans-serif;
  font-weight: 300;
}
 
.white {
  color: #ffffff;
  font-weight: 100;
  text-align: center;
}
 
#slider1 {
  display: block;
}
 
#slider2, #slider3 {
  display: none;
}
 
#testimonials {
  background-color: #BDC3C7;
  padding-top: 25px;
  padding-bottom: 50px;
  position: relative;
}
 
#testimonials blockquote {
  background-color: #ffffff;
  border-radius: 6px;
  color: #404040;
  font-size: 1.1em;
  font-weight: 400;
  margin: auto;
  padding: 17px;
  font-style: normal;
  height: 162px;
  vertical-align: middle;
}
.fa-chevron-left {
  opacity: 0.3;
  cursor: default;
}

#previous {
  display: block;
  position: absolute;
  left: 50px;
  top: 40%;
}
 
#next {
  display: block;
  position: absolute;
  right: 50px;
  top: 40%;
}
 
@media(max-width: 1280px) and (min-width: 1200px) {
  #previous {
    left: 10px;
  }
  #next {
    right: 10px;
  }
}
 
@media(max-width: 1080px) and (min-width: 981px) {
  #previous {
    left: 5px;
  }
  #next {
    right: 5px;
  }
}
 
@media(max-width: 1280px) {
  #testimonials blockquote {
    height: 182px;
  }
}
 
@media(max-width: 980px) {
  #testimonials blockquote {
    height: 245px;
  }
  #previous, #next {
    display: none;
  }
}
 
@media(max-width: 767px) {
  #testimonials {
    padding-top: 0;
    padding-bottom: 75px;
  }
  #testimonials .span4:first-of-type {
    margin-top: -60px;
  }
  #testimonials blockquote {
    height: auto;
    margin-top: 75px;
  }
}
 
.testimonialArrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid rgb(255, 255, 255);
  margin-left: 48px;
}
 
.user-avatar {
  border-radius: 50%;
  border: solid 3px #FFF;
  display: inline;
  float: left;
  margin-left: 42px;
  margin-top: 10px;
}
 
.author {
  color: #979797;
  float: left;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  margin: 15px 0 0 10px;
  text-decoration: none;
  text-transform: uppercase;
}
 
.author span {
  color: #ECF0F1;
  letter-spacing: 1px;
  text-transform: none;
}
 
.spiceworks-btn {
  background-color: #333333;
  border-radius: 40px;
  margin-top: 15px;
  padding: 12px 30px 15px 30px;
  text-align: center;
  vertical-align: middle;
}
 
.spiceworks-btn:hover {
  background-color: #262626;
}