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