Reviews Carousel Slider

index.html

<div class='reviews'>
  <!-- Panel one -->
  <div class='panel'>
    <img src='http://www.designbolts.com/wp-content/uploads/2014/01/Superman-Flat-Design.png'>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <h7>Superman</h7>
  </div>
  <!-- Panel Two -->
  <div class='panel'>
    <img src='http://www.designbolts.com/wp-content/uploads/2014/01/Batman-Flat-Design.png'>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <h7>Batman</h7>
  </div>
  <!-- Panel Three -->
  <div class='panel'>
    <img src='http://www.designbolts.com/wp-content/uploads/2014/01/Liz-Sherman-Flat-Design.png'>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <h7>Liz Sherman</h7>
  </div>
</div>
<script>
  speed = 600
</script>

reviews-carousel-slider.markdown

Reviews Carousel Slider

A Pen by Muhammad Saleh on CodePen.

License.

script.js

$(document).ready(function(){
  $(".reviews").each(function(){
    var This = $(this) ;
    var Nums = This.find(".panel").size() ;
    This.find(".panel:first").addClass("PanelAct");
    This.append("<div class='control'></div>") ;
    This.find(".panel").not(".PanelAct")
      .css("left","100%")
    for ( i=0 ; i<Nums ; i++) {
      This.find(".control").append("<span></span>") ;
    }
    This.find(".control span:eq(0)").addClass("ContActive");
    
    This.find(".control span").click(Reviews);
    
    function Reviews(){
      var loc = $(this).index();
      var ActivLoc = This.find(".ContActive").index();

      $(this).addClass("ContActive")
        .siblings().removeAttr("class");
      
      if ( loc > ActivLoc ) {
        var Dire = '100%'
        var IDire = '-100%'
      }
      if ( loc < ActivLoc ) {
        var Dire = '-100%'
        var IDire = '100%'
      }

      This.find(".panel").not(".PanelAct")
      .css("left",Dire) ;
      This.find(".panel:eq("+loc+")")
      .animate({'left':'0'},speed)
      .addClass("PanelAct")
      .siblings(".PanelAct")
      .removeClass("PanelAct")
      .animate({'left':IDire},speed);
    }
  });
});
  

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background-color : #eee ;
}
.reviews {
  width : 600px; 
  height : 150px;
  overflow : hidden ;
  background-color : #fff ;
  border-radius : 5px;
  margin : 50px auto ;
  position : relative ;
  box-shadow : 0 0 10px -2px #ddd ;
}
.panel {
  width : 100%;
  max-height: 100%;
  position : absolute ; 
}
.PanelAct {
  left : 0 ;
}
.panel img { 
  width : 100px;
  height : 100px; 
  text-align : center ;
  float : left ; 
  margin : 25px; 
}
/*== Removal Start
png images background
==*/
.panel:nth-of-type(1) img {
    background : #12aedb ;
}
.panel:nth-of-type(2) img {
    background : #db4646 ;
}
.panel:nth-of-type(3) img {
    background : #96c465 ;
}
/*== Removal End==*/

.panel p {
  float : left ; 
  width : 420px;
  clear : right ;
  text-align : justify ;
  margin : 25px 0 10px 0;
  font-size : 14px ; 
  color : #aaa ;
  line-height : 1.2em
}
.panel h7 { 
  float : left ; 
  width: 200px; 
  font-size : 14px ; 
  color : #999 ;
  font-weight : bold ;
  font-style : italic ;
}
.control { 
  position : absolute ; 
  bottom : 20px; 
  right : 30px;
}
.control span {
  background-color : rgba(0,0,0,0.1) ; 
  padding : 5px; 
  display : inline-block ;
  vertical-align : top ;
  margin-left : 5px ;
  border-radius : 50%;
  cursor : pointer ;
  transition : 0.3s ease-in
}
.ContActive {
  background-color : #bbb !important ;
}