我在Chrome和IE上的bootstrap垂直轮播有问题但在Firefox中没有。 在Firefox中，它工作得很好！
问题是 - 当我点击“下一张”幻灯片时，内容会发生变化，但不会改变它在Firefox中的变化以及应该如何变化。
我尝试做一个垂直滑块 - 请进入链接http://maholshalem.bioserver.co.il/并看到“即将到来的事件”中的内容滑块，然后点击红色按钮调用“更多”以查看它在Firefox和它在Chrome上的运作方式..
非常感谢帮助者：）
这是我的代码，如果它可以帮助你帮助我：
<!-- MainProductionHomePage -->
<div class="caption-button caption-gray left-top" style="font-size:14px;">UPCOMING EVENTS</div>
<div class="padding-top-60">
<div class="row-fluid">
<div class="span12">
<!-- slider start here -->
<div id="eventCarousel" class="carousel slide vertical" >
<div class="carousel-inner" style="min-height:800px;">
@{
<!-- get the content for the slider -->
var content = Umbraco.Content(xxxx);
int itemsCount = content.Children.Count();
int sliders = itemsCount % 5;
int currSlider = 0;
for (int i = 0; i <= sliders; i++)
{
var items = content.Children;
if (i == 0)
{
@Html.Raw("<div class=\"item active\">")
items = content.Children.Take(5);
}
else
{
items = content.Children.Skip(i * 5).Take(5);
@Html.Raw("<div class=\"item\">")
}
foreach (var item in items)
{
var contentService = ApplicationContext.Current.Services.ContentService.GetById(int.Parse(item.Id.ToString()));
var image = Umbraco.Media(contentService.Properties["smallThumbnail"].Value.ToString());
var imageUrl = image.url;
var date = (DateTime)contentService.Properties["date"].Value;
var name = contentService.Properties["name"].Value;
var description = contentService.Properties["fullText"].Value;
var themeColor = contentService.Properties["themeColor"].Value;
var shortDescription = contentService.Properties["shortText"].Value;
var itemUrl = String.Format("production/{0}", item.name.ToString().Replace(" ", "-"));
// IF Iteration HERE
<div class="row custom">
<!-- DATE -->
<div style="float:left;" onclick="location.href='@itemUrl';">
<!-- PRODUCTION Image -->
<div class="event-thumb col-md-3 col-sm-4 col-xs-12 no-wrap-col">
<img src="@imageUrl" class="production-image" style="cursor:pointer;" />
</div>
<!-- End PRODUCTION Image -->
<div class="event-list col-md-2 col-sm-3 no-wrap-col" >
<div>
<time datetime="2014-07-20 0000">
<span class="date" style="background-color:#@themeColor !important;">@date.ToString("dd.MM")</span>
<span class="day" style="background-color:#@themeColor !important;">@date.DayOfWeek.ToString().ToUpper()</span>
<span class="background-white" style="color:#@themeColor !important;">
<span class="hour">@date.ToString("HH:mm")</span>
</span>
</time>
</div>
</div>
<!-- END DATE -->
<div class="col-md-7 col-sm-5 no-wrap-col">
<div class="homepage-production-title">
<a href="~/@itemUrl" style="color:#@themeColor">@name.ToString().ToUpper()</a>
</div><span class="production-description">
@MvcHtmlString.Create(shortDescription.ToString().Length > 150 ? shortDescription.ToString().Substring(0, 150) : shortDescription)..
<a href="~/@itemUrl" style="color:#@themeColor">Read more</a>
</span>
</div>
</div>
</div>
}
@Html.Raw("</div>")
}
}
</div>
</div>
</div>
@if (itemsCount > 5)
{
<a class="caption-button caption-red right-bottom" href="#eventCarousel" data-slide="next">MORE</a>
}
</div>
</div>
答案 0 :(得分：0)
试试这个，
更多信息：
Bootstrap 3： https://github.com/tutorialdrive/Bootstrap-3-Vertical-Thumbnail-Carousel
Bootstrap 2： https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<table>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/1.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/2.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/3.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/4.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
</table>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<table>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/5.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/6.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/7.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/8.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
</table>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<table>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/9.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/10.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/11.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/12.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
</table>
</div><!--/row-fluid-->
</div><!--/item-->
</div>
答案 1 :(得分：0)
我实际上在几天前偶然发现了同样的问题。我已将其缩小到适用，但Chrome管理 .carousel 和 .carousel-inner 类。
如果您将 .vertical .active.left 设置为旋转木马的确切高度并留下：100％它＆＃34;修复＆＃34; Chrome的问题，而Firefox开始做同样的事情。我会留下几张图片给任何可以帮助我们的人并让你发布。
请注意Chrome（第一张图片）如何将 .active.left 元素向左移动100％，而Firefox则将其与容器的左边框（ .active）对齐.left 最初的左值为零。
希望这有助于我们;）
