0
これについてどうやって行くのか分かりませんが、私はそれ以上の概念を証明していると思います。私はスクロールするいくつかの画像を持っているブートストラップカルーセルを持って、画像は製品です。私のクライアントはウェブサイト上で何かを見て、それが可能かどうかを知りたがっていました。私の質問は、どのように私はそれについて、私のHTMLやCSSに入力すると、ドロップダウンメニューをスクロールする画像に行くだろうです。画像の上にドロップダウンメニュー
は、ここに私のカルーセル http://modernstudiotest.jbglobal.net/slider_menu.html
されており、ここのメニューは基本的にあなたがトップと白のメニューが転倒にマウスのカーソルを合わせ 、たまたまウェブサイトは、です。 https://www.specialized.com/us/en/
$(document).ready(function() {
$('#myCarousel').carousel({
\t interval: 0
\t })
});@charset "UTF-8";
/* CSS Document */
.carousel-control.left, .carousel-control.right {
background-image: none
}
.carousel {
margin-bottom: 0;
\t padding: 0 40px 30px 40px;
}
/* Reposition the controls slightly */
.carousel-control {
\t left: -12px;
}
.carousel-control.right {
\t right: -12px;
}
/* Changes the position of the indicators */
.carousel-indicators {
\t right: 50%;
\t top: auto;
\t bottom: 0px;
\t margin-right: -19px;
}
/* Changes the colour of the indicators */
.carousel-indicators li {
\t background: #c0c0c0;
}
.carousel-indicators .active {
background: #000000;
}
.well {
background: #ffffff
}
.thumbnail {
border-style: none;
}
.col-mid-12 {
border-style: none;
}
.carousel-control {
position: absolute;
top: 40%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
\t <div class="well">
<div id="myCarousel" class="carousel slide" data-interval="false">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
\t <div class="row-fluid">
\t <div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="img/middle_slider_1a.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1b.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1c.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1d.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1e.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t </div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
\t <div class="row-fluid">
\t \t <div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="img/middle_slider_2a.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2b.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2c.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2d.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2e.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t </div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
\t <div class="row-fluid">
\t \t <div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="img/middle_slider_3a.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3b.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3c.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t <div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3d.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3e.jpg" alt="Image" style="max-width:125%;" /></a></div>
\t </div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
\t \t \t <span>
<img src="img/ms_Lft_arrow.png" />
</span>
\t \t \t
<a class="carousel-control right" href="#myCarousel" data-slide="next">
\t \t \t <span>
<img src="img/ms_rt_arrow.png" />
</span>
</a></a>
</div><!--/myCarousel-->
</div><!--/well-->
\t \t </div>
\t </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>うまくいけば、誰かが理解し、多分私を助けるか、右方向、おかげで私を指すことができます。
：-http：//codepen.io/ arjunamgain/pen/siLfq –