2017-09-08 2 views
-1

クライアントにブートストラップテンプレートがあります。私はそこにスライダーを作った: Sliderバックグラウンドのブートストラップカルーセル

イメージはラップトップでのみ騒がしいです。私はラップトップの右側に説明を追加したい(今スライドの説明は機能しません)。それをどうやって行うのか分かりません。多くのバリエーションを試しました。 または、Bootstrapを使用しないで、スライダーを自分で書くだけで、

助けてもらえますか?

HTML:

<!-- 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> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="images/people.png" alt=""> 
    </div> 

    <div class="item"> 
     <img src="images/people.png" alt=""> 
    </div> 

    <div class="item"> 
     <img src="images/people.png" alt=""> 
    </div> 
    </div> 

    <div class="carousel-description current"> 
    <div>Отчёт по результатам обследования в форме документа в PS QUASTIO PRO</div> 
    </div> 
    <div class="carousel-description"> 
    <div>Отчёт по результатам обследования в форме документа</div> 
    </div> 
    <div class="carousel-description"> 
    <div>Отчёт по результатам обследования</div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

CSS:

#myCarousel{ 
    height: 510px; 
    background: url(../images/computer.png) no-repeat; 
    background-size: 1350px auto; 

} 

#myCarousel .carousel-inner{ 
    width: 441px; 
    height: 250px; 
    position: absolute; 
    left: 225px; 
    top: 24px; 
} 

.carousel { 
    margin-bottom: 0; 
} 

#myCarousel .carousel-inner .item img{ 
    width: 441px; 
    height: 250px; 
} 

.carousel-description{ 
    display: none; 
    width: 25%; 
    position: absolute; 
    right: 150px; 
    top: 185px; 
    font-size: 20px; 
} 

.carousel-description.current{ 
    display: block; 
} 

答えて

0

あなたはどのライブラリを使用doesntのとちょうどCSSからの写真のパスを変更、あなたは付属のPICに似ている私のコードを使用することができます。 http://jsbin.com/xegufazuyi/2/edit?html,css,js,output

:あなたは、変数yourinterval

var yourinterval=2000; 

DEMOを変更スライドの速度を制御することができます

関連する問題