1
これは私の問題です。私は2つのカルーセルスライダーを持っており、両方の幅が異なります。そして、両方の幅が似ているように修正する必要があります。最初のカルーセルと一致するようにカルーセル2のサイズを変更する方法を理解できませんでした。両方のスライダは少し異なります。カルーセル2内のイメージは大きくなりますが、私は両方のカルーセルマッチの幅が必要です。幅の異なる2つのブートストラップカルーセルスライダー
ここに私のページが見えます。コンテナクラスは、カルーセル幅にサイズ変更しているのでここでhttp://modernstudiotest.jbglobal.net/slider_menu2.html
は私のHTML
.carousel-control.left,
.carousel-control.right {
background-image: none
}
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* Reposition the controls slightly */
.carousel-control {
left: -12px;
}
.carousel-control.right {
right: -12px;
}
/* Changes the position of the indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.carousel-indicators li {
background: #c0c0c0;
}
.carousel-indicators .active {
background: #000000;
}
.well {
background: #ffffff;
border-style: none;
}
.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;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modern Studio Equipment – The leader in grip and rigging equipment, made in North Hollywood, CA USA</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ms_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- /.Carousel 1 -->
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/modernmondays.jpg" alt="first slide image">
</div>
<div class="item">
<img src="images/slider1.jpg" alt="Second slide image">
</div>
<div class="item">
<img src="images/slider2.jpg" alt="Third slide image">
</div>
<div class="item">
<img src="images/slider3.jpg" alt="Second slide image">
</div>
<div class="item">
<img src="images/slider4.jpg" alt="Second slide image">
</div>
<div class="item">
<img src="images/slider5.jpg" alt="Second slide image">
</div>
<a class="carousel-control left" href="#carousel1" data-slide="prev">
<span class="icon-prev"></span>
<a class="carousel-control right" href="#carousel1" data-slide="next">
<span class="icon-next"></span>
</a>
</a>
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
<li data-target="#carousel1" data-slide-to="3"></li>
<li data-target="#carousel1" data-slide-to="4"></li>
<li data-target="#carousel1" data-slide-to="5"></li>
</ol>
</div>
</div>
<!-- /.Carousel 2 -->
<div class="container">
<div class="row">
<div class="col-md-20">
<div class="well" style="position: relative">
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1a.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1b.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1c.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1d.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1e.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
</div>
<!--/row-fluid-->
</div>
<!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2a.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2b.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2c.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2d.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2e.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
</div>
<!--/row-fluid-->
</div>
<!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3a.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3b.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3c.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3d.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3e.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
</div>
<!--/row-fluid-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span>
<img src="images/ms_Lft_arrow.png" />
</span>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span>
<img src="images/ms_rt_arrow.png" />
</span>
</a>
</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</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>
</body>
</html>
カルーセルを作成する最大幅に関係なく、優れたWebデザイン標準に従うように応答性を保つようにしてください。 Erdemsのソリューションはうまくいくようです。イメージのサイジングは、モバイルデバイス上で適切に表示されるように歪まなければなりません。それでもヘルプが必要な場合は、私のウェブサイトwww.rocketrisa.comで私にメッセージを送ることができます:) –