はブートストラップを発行します3カルーセルの高さを0pxに変更し、mariginを-.....px

Question

私のサイトに追加したカルーセルIは本当に変です。ペリオード2では、スライドが上にスライドします。親divの高さは0pxに変更され、子divの余白は負のマージンになります。ブートストラップサイトの例では、これは起こっていません。私はブートストラップサイトから最新のコードをコピーして、私が間違っていることを見つけることができません。

誰かが私を助けることができたら、私はそれを愛するでしょう。

http://humandemo.cloudaccess.hostページの上部にあるヘッダー。

コードを使用：

<div class="container"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Carousel indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
     </ol> 
     <!-- Wrapper for carousel items --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="Second Slide"> 
      </div> 
      <div class="item"> 
       <img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="First Slide"> 
      </div> 
     </div> 
     <!-- Carousel controls --> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 

    </div> 

Answer 1

これはmootools-more.jsの仕事だと思います。このスクリプトには、the Fx.Slide class：

が含まれています。スライドエフェクトは、エレメントを水平方向または垂直方向にスライドさせます。内容は内側に折り畳まれます。

このスクリプトをコメントしてください。

Answer 2

@Jeroenを：私は=あなたのウェブサイトをチェックし、「エレメントを点検」により、CSSを使用したいくつかの変更をしようと、私を1としてあなたはdiv要素のid =「myCarousel」とのdivクラスをチェックする必要がありますしています「カルーセル・インナー」。彼らはいくつかの高さを設定されているかどうか。これがあなたを助けることを願っています

Answer 3

あなたのBootsrapカルーセルコードは完璧ですが、問題はありません。あなたの別のスクリプトで問題があるかもしれない、私はcodepenであなたのコードを使用し、その作品は完璧です。

Answer 4

私は@グレブケマルスキーの答えの後にいくつかの研究をしました、ありがとうございました。そして実際のブートストラップとMooToolsの競合、以下を参照してください。https://github.com/joomla/joomla-cms/issues/475

修正は次のとおりです。

if (typeof jQuery != 'undefined') { 
(function($) { 
$(document).ready(function(){ 
$('.carousel').each(function(index, element) { 
$(this)[index].slide = null; 
}); 
}); 
})(jQuery); 
}