Custom bxslider

jQuery, CSS, add class center and neighbor element

by Igor Roschak

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="developer">Coded by <a href="http://www.igorroschak.com/" target="_blank">Igor Roschak</a></div>

<ul class="slider-comment">
  <li data-title="Title1" data-comment="Text1" data-name="Name1">
    <img src="http://placehold.it/100x100" alt=""/>
  </li>
  <li data-title="Title2" data-comment="Text2" data-name="Name2">
    <img src="http://placehold.it/100x100" alt=""/>
  </li>
  <li data-title="Title3" data-comment="Text3" data-name="Name3">
    <img src="http://placehold.it/100x100" alt=""/>
  </li>
  <li data-title="Title4" data-comment="Text4" data-name="Name4">
    <img src="http://placehold.it/100x100" alt=""/>
  </li>
  <li data-title="Title5" data-comment="Text5" data-name="Name5">
    <img src="http://placehold.it/100x100" alt=""/>
  </li>
  <li data-title="Title6" data-comment="Text6" data-name="Name6">
    <img src="http://placehold.it/100x100" alt=""/>
  </li>
  <li data-title="Title7" data-comment="Text7" data-name="Name7">
    <img src="http://placehold.it/100x100" alt=""/>
  </li>
  <li data-title="Title8" data-comment="Text8" data-name="Name8">
    <img src="http://placehold.it/100x100" alt=""/>
  </li>
</ul>

<div class="comment-box">
  <span class="title"></span>
  <span class="comment"></span>
  <span class="name"></span>
</div>

CSS

body {
  font-family: 'PT Sans Caption', sans-serif;
}

.developer {
  margin: 10px 0 30px;
  font-size: 16px;
  text-align: center;
}

.bx-wrapper .bx-viewport  {
  background: rgba(0,0,0,0);
  border: none;
  box-shadow: none;
  margin-top: 25px;
}

.slider-comment li {
  height: 100px;
  position: relative;
}
.slider-comment li img {
  border-radius: 50%;
  max-height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
  -webkit-transition: all 0.12s linear;
  -moz-transition:    all 0.12s linear;
  -o-transition:      all 0.12s linear;
  transition:         all 0.12s linear;
}

li.active-slide img {
  max-height: 100px;
}

li.neighbor img {
  max-height: 80px;
}

.title,
.comment,
.name {
  display: block;
  margin-bottom: 10px;
}

.comment-box {
  text-align: center;
  margin-top: 30px;
}

.comment-box .title {
  font-size: 20px;
}

.comment-box .comment {
  font-size: 18px;
}

.comment-box .name {
  font-size: 14px;
}

JavaScript

var slider_comment = $('.slider-comment');
slider_comment = $('.slider-comment').bxSlider({
  pager: false,
  slideMargin: 15,
  maxSlides: 5,
  minSlides: 5,
  moveSlides: 1,
  slideWidth: 100,
  onSlideBefore: function ($slideElement, oldIndex, newIndex) {

    $('.slider-comment .active-slide').removeClass('active-slide');
    $('.slider-comment .neighbor').removeClass('neighbor');
    //$slideElement.;
    var i = newIndex + 7;
    $('.slider-comment li:eq(' + i + ')').addClass('active-slide');
    
    var i = newIndex + 6;
    $('.slider-comment li:eq(' + i + ')').addClass('neighbor');
    
    var i = newIndex + 8;
    $('.slider-comment li:eq(' + i + ')').addClass('neighbor');
    
    updateReviewData();
    
  },
  onSliderLoad: function () {
    $('.slider-comment li:eq(7)').addClass('active-slide');
    $('.slider-comment li:eq(6)').addClass('neighbor');
    $('.slider-comment li:eq(8)').addClass('neighbor');
    
    updateReviewData();
  }
});

function updateReviewData()
{
	var $slideElement = $('.slider-comment li.active-slide');
  
  $('.comment-box .title').text( $slideElement.data('title') );
  $('.comment-box .comment').text( $slideElement.data('comment') );
  $('.comment-box .name').text( $slideElement.data('name') );
}