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），当查看第二个/ EVEN编号幻灯片时，某些脚本设置JDIV的高度等于＆＃34; 0px＆＃34;，请参阅我的代码在下面

<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>

解决方案

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

添加一个名为＆＃34的CSS类;＃myCarousel＆＃34; （轮播的ID）并将其边距设置为0px，重要的是

#myCarousel{ margin:0px !important; }

其次添加另一个CSS类，如

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

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

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

Answer 3

我没有为您解决问题，但我能找到一些问题。第一个也是最大的问题是你有内联样式，导致图像消失＆＃34;。图像实际上只是向上移动572像素并且不在屏幕上。请注意下面的两张图片。第一个链接是可行的图像。第二个链接是不显示的图像。

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

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

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

Bootstrap 2旋转木马第二张幻灯片消失

3 个答案: