Bootstrap 3 - Carousel - 左右箭头和渐变不与图像对齐

Question

我有基本的Bootstrap 3旋转木马。

我正在尝试找出正确的方法来显示左右箭头和渐变，以便在图像不是页面的整个宽度时覆盖实际图像。

  <div id="myCarousel" class="carousel slide" data-keyboard="true" data-pause="hover" data-ride="carousel" data-interval="3000">
         <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
              </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
                <img src="~/Content/SlideShowImages/myimage.Name" class="img-responsive center-block" />
                <div class="carousel-caption">
                    <h1>Caption</h1>
                </div>
            </div>
         </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left luluColor"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right luluColor"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Answer 1

有一些工作，但我认为这是一个问题，尝试这样做。

<强> FIDDLE

<强> jQuery的：

var width = $('div.item.active > img').width();

$('#myCarousel').width(width);

$('#myCarousel').on('slide.bs.carousel', function () {
    var width = $('div.item.active > img').width();
    $('#myCarousel').width(width);
});

我在这里只包含了jQuery，因为HTML与你发布的内容相同，只是我使用了placehold.it图像来测试图像。如果有人对此感到脾气暴躁，我会发布HTML。

无论如何，jQuery获取第一个图像的宽度并设置要匹配的轮播宽度，然后当图像滑动时，当幻灯片动作开始时，它获取下一个活动图像的宽度并设置宽度旋转木马匹配。除非您指定staitc高度，否则轮播的高度将自动匹配图像的高度。

您还可以使用slid.bs.carousel代替幻灯片选项，以便在图片滑入到位后实现。这使它变得更加平滑，并且应该保证旋转木马的高度/宽度将箭头和渐变放置在它们需要的位置。

然而，这突出了这种方法的一个问题：当轮播调整大小时，用户现在必须移动鼠标以手动随机播放到下一个图像，如果这是他们通过它们的方式。您还会使页面对页面项进行大量重新调整，具体取决于您如何设置所有内容。

当然，你可以做你想做的事，而且我不知道你需要这个功能的确切原因，但这是需要注意的事情。可能还有其他方法可以缓解这个问题，但我的解决方案仅仅是为了表明完全有可能根据当前活动的图像动态设置Bootstrap轮播的宽度。