Bootstrap自定义轮播模糊缩略图

Question

我想说清楚，因为你可以看到图片缩略图太模糊了我只是想让它成为一个清晰的图像。并且缩略图上的箭头将靠近结束图片。

<div class="col-sm-12" style="padding:0px !important;">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
          <div class="item active">
              <img src="" class="crsl-img">
          </div>
          <div class="item">
              <img src="http://placehold.it/350x250/00ffff/000&amp;text=Product+Image+2" class="crsl-img">
          </div>
          <div class="item">
              <img src="http://placehold.it/350x250/ff00ff/fff&amp;text=Product+Image+3" class="crsl-img">
          </div>
          <div class="item">
              <img src="http://placehold.it/350x250/ffff00/000&amp;text=Product+Image+4" class="crsl-img">
          </div>
          <div class="item">
              <img src="http://placehold.it/350x250/612b65/fff&amp;text=Product+Image+5" class="crsl-img">
          </div>
          <div class="item">
              <img src="http://placehold.it/350x250/00ffff/000&amp;text=Product+Image+6" class="crsl-img">
          </div>
          <div class="item">
              <img src="http://placehold.it/350x250/db371b/fff&amp;text=Product+Image+7" class="crsl-img">
          </div>
          <div class="item">
              <img src="http://placehold.it/350x250/feb8aa/000&amp;text=Product+Image+8" class="crsl-img">
          </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
  </div>
</div><!-- end col-md-12 -->