Home: http://bxslider.com/

<div class="slider_wrap">
	<ul id="custom_slider" class="bxslider">
		<li><img src="../images/6customization/glasses templete.png" /></li>
		<li><img src="../images/6customization/glasses templete.png" /></li>
		<li><img src="../images/6customization/glasses templete.png" /></li>
		<li><img src="../images/6customization/glasses templete.png" /></li>
		<li><img src="../images/6customization/glasses templete.png" /></li>
	</ul>
</div>
 
<div id="custom_slider_pager">
  <a data-slide-index="0" href=""><img src="../images/6customization/cutomization_7a.png" /></a>
  <a data-slide-index="1" href=""><img src="../images/6customization/cutomization_7b.png" /></a>
  <a data-slide-index="2" href=""><img src="../images/6customization/cutomization_7c.png" /></a>
  <a data-slide-index="3" href=""><img src="../images/6customization/cutomization_7a.png" /></a>
  <a data-slide-index="4" href=""><img src="../images/6customization/cutomization_7b.png" /></a>
</div>

<a href="#" class="slider_nav left"></a>
<a href="#" class="slider_nav right"></a>

 

  var slide_count = $('.bxSlider').children().not('.bx-clone').size();
  slider = $('.bxSlider').bxSlider({
  	pager: false, 
  	controls: true, 
  	onSlideAfter: function(){
  	//Hide/Show nav when it's the first or last slide 
        var index = slider.getCurrentSlide();
        if(index > 0){
        	$('.bx-wrapper .bx-prev').show();
        }

        if(index == 0){
        	$('.bx-wrapper .bx-prev').hide();
        }

        if(slide_count > 0){
        	$('.bx-wrapper .bx-next').show();
        }

        if(index == (slide_count - 1)){
        	$('.bx-wrapper .bx-next').hide();
        }
    }
  });

  slider.goToSlide(index);

$('.bxslider').bxSlider({
	minSlides: 11,
	maxSlides: 12,
	slideWidth: 70,
	slideMargin: 15, 
	nextSelector: '#slider-next',
	prevSelector: '#slider-prev', 
	pager: false, 
	controls: true, 
	auto: true
});

.slider_wrap{
	
}

/* Remove Default shadow and border */
.bx-wrapper{
	box-shadow: none;
	border: 0;
}
/* end */

/* Remove Default shadow and border(Old version maybe) */
.bx-wrapper .bx-viewport{
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    left: 0;
    background: transparent;
}
.bxslider{
	list-style: none; 
	padding: 0px; 
	margin: 0px; 
}
.bxslider li{
	width: 70px; 
	height: 70px; 
	overflow: hidden; 
	float: left; 
	margin: 0px 15px 15px 0px; 
	border-radius: 5px;
}
.bxslider li img{
	width: 100%; 
	height: 100%;
}
.slider_nav{
	display:block; 
	position: absolute;
	background: url(../images/arrow.png) no-repeat; 
	width: 10px; 
	height: 16px;
	top:25px;
	overflow: hidden;
}
.slider_nav a{
	padding-left:10px;
}
.slider_nav.left{
	left:-10px;
}
.slider_nav.right{
	background-position: 0px -16px;
	right:-10px;
}

/* Pager styles */
.bx-wrapper .bx-pager{
	position: absolute;
	bottom: 15px;
}

/* Square Pagers */
.bx-wrapper .bx-pager.bx-default-pager a{
	-webkit-border-radius: 0px;
    border-radius: 0px;
}
/* End Pager styles */


/* Override Default nav */
.bx-wrapper .bx-controls-direction a{
	width: 18px;
	height: 52px;
}
.bx-wrapper .bx-prev {
	left: 10px;
	background: url(../../images/about/left_arrow.png) no-repeat 0 0;
}
	.bx-wrapper .bx-prev:hover {
		background-position: 0 -52px;
	}
.bx-wrapper .bx-next {
	right: 10px;
	background: url(../../images/about/right_arrow.png) no-repeat 0 0;
}
	.bx-wrapper .bx-next:hover {
		background-position: 0 -52px;
	}

Issue: Controllers might not work after “goToSlide()”.

Solution:

var slider = null;

$(document).ready(function(){
	var $current_brand = $('.bxslider li:eq(' + current_index + ') a');
	$current_brand.addClass('active_brand');
	$current_brand.find('img').attr('src', $current_brand.attr('data-over'));

	slider = $('.bxslider').bxSlider({
		nextSelector: '#bxnext',
		prevSelector: '#bxprev', 
		pager: false, 
		minSlides: 7,
		maxSlides: 7,
		moveSlides: 0, 
		slideWidth: 100,
		slideMargin: 32, 
		infiniteLoop: true, //This line could cause some other problems
		startSlide: current_index, 
		onSliderLoad: slider_loaded
	});
});

function slider_loaded(index){
	//This is the key! slider still could be null even in onSliderLoad
	if(slider == null){
		setTimeout(function () {
			// interval function body
			slider_loaded(index);
		}, 100);
		return;
	}

	var page = Math.ceil((current_index + 1) / 7); //7 is the number of displayed items
	//var current = slider.getCurrentSlide();
	//console.log('Count: ' + slider.getSlideCount());
	//console.log('Current: ' + index);
	//console.log('page: ' + page);
	slider.goToSlide(page-1);
}

Note:

It’s possible to show current slide in the middle  and show part of previous and next slide.

The key is to use “slideWidth” option.