引导滑块轮播，其中部分图像和后图像保留在屏幕上

Question

我正在尝试为引导滑块实现以下设计：你是正确的Stack，它在这篇文章中似乎确实是很多代码。有时这是编程网站中帖子的性质，主要是代码。

所以在写完顶部段后，堆栈仍然需要我添加更多细节。让我补充一点，如果有人可以帮助我，我会非常感激，或者指向一个可以设计我的模板的画廊，或者给我一些如何根据我的需要转换自举滑块的想法。

这是代码：

CSS：

<style>
   .selected img {
    opacity:0.5;
    }


  .carousel-inner {
  position: relative;
  width: 100%;
  overflow: visible !important;
  }

</style>

剧本：

<script>

    $('#myCarousel').carousel({
    interval: 4000
    });

    // handles the carousel thumbnails
    $('[id^=carousel-selector-]').click( function(){
      var id_selector = $(this).attr("id");
      var id = id_selector.substr(id_selector.length -1);
      id = parseInt(id);
      $('#myCarousel').carousel(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $(this).addClass('selected');
    });

    // when the carousel slides, auto update
    $('#myCarousel').on('slid', function (e) {
      var id = $('.item.active').data('slide-number');
      id = parseInt(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $('[id=carousel-selector-'+id+']').addClass('selected');
    });

</script>

和代码：

<div class="container" style="margin-top:20px;">
    <!-- main slider carousel -->
    <div class="row">

    <div class="col-md-12" id="slider">
    <div class="col-md-3">&nbsp;</div>
    <div class="col-md-6" id="carousel-bounding-box">
    <div id="myCarousel" class="carousel slide">
    <!-- main slider carousel items -->
    <div class="carousel-inner">
    <div class="active item" data-slide-number="0">
    <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive">
    </div>
    <div class="item" data-slide-number="1">
    <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
    </div>
    <div class="item" data-slide-number="2">
    <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive">
    </div>
    <div class="item" data-slide-number="3">
    <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive">
    </div>
    <div class="item" data-slide-number="4">
    <img src="http://placehold.it/1200x480&amp;text=five" class="img-responsive">
    </div>
    <div class="item" data-slide-number="5">
    <img src="http://placehold.it/1200x480&amp;text=six" class="img-responsive">
    </div>
    <div class="item" data-slide-number="6">
    <img src="http://placehold.it/1200x480&amp;text=seven" class="img-responsive">
    </div>
    <div class="item" data-slide-number="7">
    <img src="http://placehold.it/1200x480&amp;text=eight" class="img-responsive">
    </div>
    </div>
    <!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
    </div>

    <div class="col-md-3">&nbsp;</div>

    </div>
    </div>
    <!--/main slider carousel-->


    <!-- thumb navigation carousel -->
    <div class="col-md-12 hidden-sm hidden-xs text-center" id="slider-thumbs" style="margin-top:20px;">

        <!-- thumb navigation carousel items -->
      <ul class="list-inline">
      <li> <a id="carousel-selector-0" class="selected">
        <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-1">
        <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-2">
        <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-3">
        <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
      </a></li>
            <li> <a id="carousel-selector-4">
        <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-5">
        <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-6">
        <img src="http://placehold.it/80x60&amp;text=seven" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-7">
        <img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive">
      </a></li>
        </ul>
    </div>
    </div>