2017-07-07 5 views
0

私はちょうど私のhtmlプロジェクトにカルーセル項目を追加しました。私の質問はどうやって中間のカルーセルを表示できますか?そのページは左側に表示されています。あなたのカルーセルプラグインが(多分あなたはこれを変更することができ、セットアップがある?)インラインスタイルを追加しているため!important属性を使用する必要があります。このような状況で中央のカルーセルを作成し、ページの3/4に収まる方法

www.littlebossworld.com

+0

のために私は自分のカルーセル要素上の入力にCSSコードを必要とする(これはavadaのテーマである) –

+0

これまでに何を試しましたか?あなたのHTMLコードは何ですか? – NaeiKinDus

答えて

0

"ハード" CSS:

.fusion-carousel .fusion-carousel-wrapper { 
    margin: 0 auto !important; 
} 
+0

ここにコードを追加するCSSクラス ラッピングするHTML要素にクラスを追加します。 しかし、動作しません –

0

this shows the example

この規範ヘルプあなた

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="Content/bootstrap.css" rel="stylesheet" /> 
    <style> 
     .corosolstylelog { 
      margin: 0 auto; 
     } 

     .carousel-inner > .item > img, 
     .carousel-inner > .item > a > img { 
      margin: 0 auto; 
     } 
    </style> 
    <script src="Scripts/jquery-1.10.2.js"></script> 
    <script src="Scripts/bootstrap.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var hight = $(window).height(); 
      var hightforcourosol = ($(window).height()/4) * 3; 
      var width = ($(window).width()/2); 

      $('.carousel-inner img').css("height", hightforcourosol); 
      $('.carousel-inner a img').css("height", hightforcourosol); 
      $('.carousel-inner img').css("width", width); 
      $('.carousel-inner a img').css("width", width); 
     }) 

    </script> 
</head> 
<body> 
    <div class="col-lg-2"> 
     Left Side 
    </div> 
    <div class="col-lg-8 corosolstylelog"> 

     <div id="myCarousel" class="carousel slide" data-ride="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> 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
       <li data-target="#myCarousel" data-slide-to="3"></li> 
      </ol> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 

       <div class="item active"> 
        <img src="Image/Carousel/a.jpg" alt="Chania"> 

        <div class="carousel-caption"> 
         <h3>Chania</h3> 
         <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="Image/Carousel/b.jpg" alt="Chania"> 
        <div class="carousel-caption"> 
         <h3>Chania</h3> 
         <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="Image/Carousel/c.jpg" alt="Flower"> 
        <div class="carousel-caption"> 
         <h3>Flowers</h3> 
         <p>Beatiful flowers in Kolymbari, Crete.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-2"> 
     Right Side 
    </div> 
</body> 
</html> 
関連する問題