何かを変更したいこの HTML テンプレートがありますが、その方法がわかりません。私がする必要があるのは、上部のカルーセルが小さくなり、ページ全体を占有しないようにすることです.cssファイルにアクセスしようとしましたが、機能していないようです. カルーセルの ID を編集して、高さを 50% にしてみました。どうすればこれを行うことができますか、ありがとう!
ライブ テンプレートへのリンクは次のとおりです: http://sitediscount.ru/parallaxer_new/ CSS ファイルはhttp://sitediscount.ru/parallaxer_new/assets/css/style.cssにあります
カルーセルのデフォルトの CSS コードは次のとおりです。
/* ################ Carousel sliders section##################### */
/******* TOP SLIDER
**************/
.slider_top {
padding-top:160px;
}
.slider_top .carousel-control {
position: absolute;
top: 250px;
}
.slider_top .carousel-control {
position: absolute;
top: 340px;
}
.slider_top .btn-control {
position: relative;
display: inline-block;
overflow: visible;
cursor: pointer;
outline: 0;
border: 0;
background: #e93f33;
padding: 18px 8px;
font-size: 18px;
font-weight: 200;
color: #fff;
border: 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 8px 8px 19px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 8px 8px 19px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25),8px 8px 19px rgba(0, 0, 0, 0.3);
}
.slider_top .carousel-control.left{
left:0px;
}
.slider_top .carousel-control.right{
right:0px;
}
.slider_top .hero-unit {
padding-top:30px !important;
}
/**********************SECTION SLIDER ***********************/
#slider-section {
background:url( ../img/blogbg.png) repeat;
}
#slider-section .page-header h3{
background:url( ../img/blogbg.png) repeat;
}
#carousel_vertical_slide.carousel, #carousel_vertical_slide_2.carousel, #carousel_horizontal_slide.carousel, #carousel_horizontal_slide_2.carousel{
min-height:400px;
margin:40px 0px;
}
.span6 #carousel_fade.carousel, .span6 #carousel_fade_2.carousel{
min-height:280px;
height:300px;
margin:40px 0px;
}
.carousel-fade .carousel-control{
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity:0;
opacity: 0;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.carousel-fade:hover .carousel-control{
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity:1;
opacity: 1;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#carousel_fade.carousel .carousel-control.right, #carousel_fade_2.carousel .carousel-control.right{
right:0px;
}
#carousel_fade.carousel .carousel-control.left, #carousel_fade_2.carousel .carousel-control.left{
left:0px;
}
.carousel-control.btn-control {
position: absolute;
height: auto;
width: auto;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
.carousel-inner .item img {
display: inline-block !important;
}
.carousel-inner .item {
text-align: center !important;
}
@media (max-width: 570px) {
.carousel-control.left {
left: 0;
}
.carousel-control.right {
right: 0;
}
}
.carousel-control {
background: none;
border: none;
opacity: 1;
}
.carousel-control:hover {
background: none;
border: none;
opacity: 1;
}
.carousel.horizontal .next {
left: 100%;
}
.carousel.horizontal .prev {
left: -100%;
}
.carousel.horizontal .active.left {
left: 100%;
}
.carousel.horizontal .active.right {
left: -100%;
}
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:0;
}
.carousel.carousel-fade .active.item {
opacity:1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
.vertical .carousel-inner {
height: 100%;
}
.carousel.vertical .item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
.carousel.vertical .next {
top: 400px;
}
.carousel.vertical .prev {
top: -400px;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0;
}
.carousel.vertical .active.left {
top: -400px;
}
.carousel.vertical .active.right {
top: 400px;
}
.carousel.vertical .item {
left: 0;
}
.carousel .inactive {
position: absolute;
display: block;
z-index: -1;
}
.carousel .inactive.active {
position: relative !important;
z-index: 0;
}
.btn-control {
position: relative;
display: inline-block;
overflow: visible;
margin: 0;
padding: 10px 5px;
margin-top: 8px;
cursor: pointer;
outline: 0;
border: 0;
background-color: #fff;
background-image: -moz-linear-gradient(top,#fff,#eee);
background-image: -ms-linear-gradient(top,#fff,#eee);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#eee));
background-image: -webkit-linear-gradient(top,#fff,#eee);
background-image: -o-linear-gradient(top,#fff,#eee);
background-image: linear-gradient(top,#fff,#eee);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0);
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding;
zoom: 1;
z-index: 1;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 14px;
color: #333;
min-width: 42px;
text-shadow: #fff 0 1px 0;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: inherit;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 4px 4px 8px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 4px 4px 8px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25),4px 4px 8px rgba(0, 0, 0, 0.05);
}
.btn-control:hover, .btn-control:focus, .btn-control:active, .btn-control.active {
color: #333;
text-decoration: none;
background-color: #dcdcdc;
background-image: -moz-linear-gradient(top,#dcdcdc,#dcdcdc);
background-image: -ms-linear-gradient(top,#dcdcdc,#dcdcdc);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#dcdcdc),to(#dcdcdc));
background-image: -webkit-linear-gradient(top,#dcdcdc,#dcdcdc);
background-image: -o-linear-gradient(top,#dcdcdc,#dcdcdc);
background-image: linear-gradient(top,#dcdcdc,#dcdcdc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc',endColorstr='#dcdcdc',GradientType=0);
z-index: 100;
outline: 0;
}
.btn-control i{
font-size:18px;
}
カルーセルの HTML コードは次のとおりです。
<div id="carousel_horizontal_slide_2" class="carousel slide slider_top">
<div class="carousel-inner">
<!--########## item #############-->
<div class="item">
<div class="hero-unit text-center">
<h1 class="">
<span class="active">PARALLAXER </span></h1>
<!-- !! DEL Class="active" when used static animated h1 script -->
<h2 class="text-center">
Start & grow faster with PARALLAXER
</h2>
</div>
</div>
<!--############/item###########-->
<!--########## item #############-->
<div class="item">
<img src="images/browserthree.png" alt="">
</div>
<!--############/item###########-->
<!--########## item #############-->
<div class="item active">
<img src="images/responsiveshwcase.png" alt="">
</div>
<!--############/item###########-->
</div>
<a class="carousel-control left btn-control " href="#carousel_horizontal_slide_2" data-slide="prev"><i class="fa-icon-double-angle-left main-color"></i></a>
<a class="carousel-control right btn-control btn-action" href="#carousel_horizontal_slide_2" data-slide="next"><i class="fa-icon-double-angle-right main-color"></i></a>
</div>