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

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

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

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

使用Chrome，我打开了开发者控制台和手动更改边距为0px，而不是-572px和它固定的问题。我会再次看看你的JS，看看每个图像应用了什么样的值，因为整个显示都是动态呈现的，我假设用于移动设备。

Answer 2

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

 
<div class="col-sm-12 pharma"> 

<!-- this is the div which joomla is adding (JDIV) --> 
<div style="margin: 0px; position: relative; overflow: hidden; height: 0px;"> 
<!-- this is the div which joomla is adding (JDIV) --> 

    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: -203px 0px 0px; overflow: hidden;"> 
     <div class="carousel-inner"> 
      .... 
     </div> 
     <div class="ind-div">  
      <ol class="carousel-indicators"> 
       .... 
      </ol>  
     </div> 
    </div> 
</div> 

</div> 

解决方案

该解决方案为我工作，也应该为你工作了。

添加一个名为 “#myCarousel”（旋转木马的ID），一个CSS类，并将其边缘具重要为0px，

#myCarousel{ margin:0px !important; }

其次添加另一个CSS类像

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

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

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

Answer 3

这是由于通过MooTools冲突引起的，请下载以下插件和应用你的喜好，它会解决此问题：

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