旋转木马与自动隐藏缩略图

Question

您好我正在使用Bootstrap Carousel进行一些项目，我已经制作了一些旋转木马，这就是我的项目看起来像My Carousel

我的问题是我想将我的缩略图放在此面板或this

之类的内容中

这是我想要做的源代码

＆＃13;

＆＃13;

$(function(){
	$(document).on('click','.slider-arrow.show',function(){
	    $( ".slider-arrow, .panel" ).animate({
          right: "+=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('«').removeClass('show').addClass('hide');
    });
	
	$(document).on('click','.slider-arrow.hide',function(){
	    $( ".slider-arrow, .panel" ).animate({
          right: "-=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('»').removeClass('hide').addClass('show');
    });
});

＆＃13;

body {
    overflow: hidden
}
.panel {
	width:300px;
	float:right;
	height:550px;
	background:#d9dada;
	position:relative;
	right:-300px;

}
.slider-arrow {
	padding:5px;
	width:10px;
	background:#d9dada;
	font:400 12px Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	position:relative;
	right:-300px;
    float: right
}

＆＃13;

<div class="panel">
      </div>
      
      <a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

＆＃13;

＆＃13;

＆＃13;

请任何人帮助我!!