带引导程序的全尺寸滑块 [英] Full size slider with bootstrap
本文介绍了带引导程序的全尺寸滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我尝试制作两张图片的完整滑块。滑块正在工作，但图像不是全尺寸。这就是我所拥有的：
index.cshtml：
Hi everyone,
I try to make a full slider of two images. the slider is working, but the images are not fullsize. This is what I have:
index.cshtml:
<pre lang="xml">@section Styles {
<link href="@Url.Content("~/Content/the-big-picture.css")" rel="stylesheet" type="text/css" />
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Carousel</title>
</head>
<body>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" @*data-interval="1000"*@ data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div class="item">
<div class="fill" style="background-image:url('../../Images/VeryLarge.JPG');">
@*<div class="container">
</div>*@
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('../../Images/road.JPG');">
<div class="container">
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
@*<span class="glyphicon glyphicon-chevron-left"></span>*@
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
@*<span class="glyphicon glyphicon-chevron-right"></span>*@
</a>
</div>
</div>
</body>
</html>
@section Scripts
{
@*<link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" type="text/css" />*@
@*<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />*@
<link href="@Url.Content("~/Content/Cyborg-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
}
和我的css：
and my css:
.item {
/*background: #333;*/
text-align: center;
height: 1000px !important;
/*width:1900px !important;*/
}
/*.carousel {
margin-top: 20px;
}*/
@media (max-width: 767px) {
body {
width:auto;
padding-left: 0;
padding-right: 0;
background-size: cover;
background-color: black;
}
}
.full {
/*background: url(../Images/VeryLarge.JPG) no-repeat center center fixed;*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.bs-example {
margin: 20px;
background-size: cover;
}
.carou
推荐答案
请尝试这样做。使用img控件显示图像。如果这有助于您的问题，请告诉我。
Hi,
Please try like this. Use img control to display the images. Please let me know if this helps your problem.
<div class="carousel-inner">
<div class="active item">
<div class="item">
<div class="fill">
<div class="container">
<img src="Images/3.jpg" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="fill">
<div class="container">
<img src="Images/2-small.jpg" />
</div>
</div>
</div>
</div>
<section class="block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="" alt="Slide1" />
</div>
<div class="item">
<img src="" alt="Slide2" />
</div>
<div class="item">
<img src="" alt="Slide3" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</section>
我真的不明白这里发生了什么。但我已经在这里发布了三次我的解决方案。无论如何谢谢大家的answares
我再做一次：
这是我的解决方案：< br $>
I realy don' t understand what happened here. But I posted already three times my solution here. Anyway thank you all for the answares
I do it again:
This is my solution:
<div class="bs-example" style="position:fixed;width:100%;height:100%;z-index:-1;top:0;left:0;">
<div id="myCarousel" class="carousel slide" @*data-interval="1000"*@ data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div class="item">
<div class="fill" style="background-image:url('../../Images/road.JPG');">
@*<div class="container">
</div>*@
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('../../Images/VeryLarge.JPG');">
<div class="container">
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
@*<span class="glyphicon glyphicon-chevron-left"></span>*@
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
@*<span class="glyphicon glyphicon-chevron-right"></span>*@
</a>
</div>
</div>这篇关于带引导程序的全尺寸滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
