幻灯片轮播缩略图引导程序3

Question

我想插入bootsrap 3的幻灯片轮播缩略图以在我的产品页面上显示相关产品。我目前正在使用此代码：

`

            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active">
                <div class="col-sm-4"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                        </div>
                </div> 
                <div class="item">
                <div class="col-sm-4"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                        </div>
                </div> 
                <div class="item">
                <div class="col-sm-4"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                        </div>
                </div> 
                <div class="item">
                <div class="col-sm-4"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                        </div>
                </div> 
                <!--/item-->
            </div>
            <!--/carousel-inner--> 
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
        </div>
        <!--/myCarousel-->`

我有两个问题： 1）我只想在幻灯片的内容超过其容器的宽度时显示导航箭头。我不想总是看到导航箭头。
2）我希望一次仅在响应（移动）版本中显示一张幻灯片。之后，我希望使用导航箭头在幻灯片中一一滚动产品。
3）始终使用引导程序3在产品图像上是否具有缩放功能？

谢谢