Bootstrap 2轮播第二张幻灯片消失

Question

我们在 Joomla 3.2.2 网站上使用 Bootstrap 2。见：http://test.stuntlist.com/west

第一张幻灯片效果很好，但是当第二张幻灯片进来时，它就消失了。您可以看到它开始在幻灯片之间转换，但随后幻灯片应该所在的区域消失了，内容向上移动到了幻灯片区域。

我没有在网站上看到任何 JS 错误。我们在其他网站上使用了相同的轮播代码，没有出现此问题。

这是轮播代码：

    <div class="slideshow">
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
          <a href="/component/joomgallery/action-photos?Itemid=88"><span data-picture data-alt="">
            <span data-src="/images/hero/slide01.jpg"></span>
            <span data-src="/images/hero/portrait/slide01mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
            <noscript><img src="/images/hero/slide01.jpg" alt=""></noscript>
          </span></a>
        <div class="carousel-caption">
          <div class="container">
            <h4>Slide Caption Goes Here.</h4>
          </div>
        </div>
      </div>
     <div class="item">
          <span data-picture data-alt="">
            <span data-src="/images/hero/slide02.jpg"></span>
            <span data-src="/images/hero/portrait/slide02mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
            <noscript><img src="/images/hero/slide02.jpg" alt=""></noscript>
          </span>
        <div class="carousel-caption">
          <div class="container">
            <h4>Second Caption.</h4>
          </div>
        </div>
      </div>
    </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
  </div>
</div>

知道是什么原因造成的吗？

谢谢。

Answer 1

这是由于与 Mootools 冲突造成的，下载以下插件并应用您的偏好即可解决此问题：

https://extensions.joomla.org/extension/mootools-enabler-disabler

Answer 2

问题是 Joomla 在 Carousel 容器之外添加了另一个 DIV（我们将其称为 JDIV），当查看第二个/偶数编号幻灯片时，某些脚本将 JDIV 的高度设置为“0px”，请参见下面的代码

……

……

解决方案

这个解决方案对我有用，也应该对你有用。

添加一个名为“#myCarousel”的 CSS 类（轮播的 ID），并将其边距设置为 0px 和重要，

#myCarousel{ margin:0px !important; }

其次添加另一个 CSS 类，如

.pharma>div{ height:204px !important; }

其中 .pharma 是我在 JDIV 之外的 DIV 上使用的类。高度将与我使用的不同，如果使用响应式，可能必须使用媒体查询。

要查找高度，只需检查元素并记下第一张幻灯片的高度，然后在 CSS 类中使用该高度。

Answer 3

我没有为您解决问题，但我找到了一些问题。第一个也是最大的问题是您具有导致图像“消失”的内联样式。图像实际上只是向上移动了 572px 并且离开了屏幕。注意下面的两张图片。第一个链接是有效的图像。第二个链接是不显示的图片。

http://tinypic.com/r/hthi4y/8

http://tinypic.com/r/2hoix35/8

使用 chrome，我打开了开发者控制台并手动将边距更改为 0px 而不是 -572px，它解决了问题。我会再次查看您的 JS 并查看每个图像应用了哪些值，因为我假设移动设备是动态呈现整个显示的。