Для того, чтобы получить отзывчивую полноэкранную карусель, рекомендуется использовать встроенные изображения в качестве фоновых изображений. Ниже я использовал скрипт, который «автоматически» делает это при загрузке страницы.
Посмотрите, что я получил, используя классы Bootstrap 4 и некоторые пользовательские CSS:
$('#demo').find('.carousel-item').each(function() {
var imgContainer = $(this),
bkImg = imgContainer.find('img').attr('src');
imgContainer.css("background-image", 'url("' + bkImg + '")');
});
.carousel-item {
height: 100vh;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 0 15%;
}
.carousel-item.active,
.carousel-item-left,
.carousel-item-right {
display: flex !important;
justify-content: center;
align-items: center;
}
.carousel-item img {
display: none;
}
.carousel-item h1 {
color: #fff;
font-size: 36px;
padding: 0 10%;
}
.carousel-item p {
color: #fff;
margin: 10px 0;
}
.carousel-indicators {
margin: 0 !important;
bottom: 7vh !important;
}
.carousel-indicators li {
height: 20px !important;
width: 100px !important;
border-radius: 0px !important;
opacity: .8 !important;
background: url("https://picsum.photos/100/40/?gravity=west") center center no-repeat !important;
}
@media screen and (min-width: 992px) {
.carousel-indicators {
bottom: auto !important;
top: 67vh !important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div id="demo" class="carousel slide" data-ride="carousel" data-inerval=4000>
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="slide-content mx-auto">
<img src="https://i.imgur.com/wnZPRGU.jpg" alt="">
<h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
<p class="text-center">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id.</p>
<div class="text-center">
<a class="btn btn-md btn-primary" href="#" role="button">Browse gallery</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide-content mx-auto">
<img src="https://i.imgur.com/wnZPRGU.jpg" alt="">
<h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
<p class="text-center">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
<div class="text-center">
<a class="btn btn-md btn-primary" href="#" role="button">Browse gallery</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide-content mx-auto">
<img src="https://i.imgur.com/wnZPRGU.jpg" alt="">
<h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
<p class="text-center">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<div class="text-center">
<a class="btn btn-md btn-primary" href="#" role="button">Browse gallery</a>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
Вы можете написать больше CSS , включая медиа-запросы , чтобы получить результат, который вам подходит, на всех или на большинстве устройств.
@Dawkins
100 запусков - это слишком мало, вам нужно выполнить примерно 10000 раз несколько раз и повторить это, а затем вычислить среднее значение, чтобы получить надежный результат. Допустимая погрешность в вашем примере слишком велика, но это правильный путь.
Вот что я сделал:
var results1 = new List<long>();
var results2 = new List<long>();
for (int j = 0; j < 100; j++)
{
var sp = new System.Diagnostics.Stopwatch();
// With HttpContext.Current:
sp.Start();
for (int i = 0; i < 10000; i++)
{
HttpContext.Current.Response.Output.Write(i);
}
sp.Stop();
results1.Add(sp.ElapsedTicks);
// Without:
TextWriter output2 = HttpContext.Current.Response.Output;
sp.Reset();
sp.Start();
for (int i = 0; i < 10000; i++)
{
output2.Write(i);
}
sp.Stop();
HttpContext.Current.Response.Clear();
results2.Add(sp.ElapsedTicks);
}
results1.Sort();
results2.Sort();
HttpContext.Current.Response.Write(string.Format("HttpContext.Current={0:0.000}ms, Local variable={1:0.000}ms, R={2:0.0%}<br/>", results1[results1.Count / 2] / (double)TimeSpan.TicksPerMillisecond, results2[results2.Count / 2] / (double)TimeSpan.TicksPerMillisecond, (double)results1[results1.Count / 2] / (double)results2[results2.Count / 2]));
Ваш результат показывает, что разница в производительности составляет 18%, что говорит о том, что это дороже, но меньше на 8%.
Я пересчитывал числа несколько раз и обнаружил разницу в 10% с погрешностью менее 1%.
Он стабилизируется вокруг:
HttpContext.Current=0,536ms, Local variable=0,486ms, R=110,2%
В любом случае, HttpContext.Current, чтобы создать серьезную проблему с производительностью, вам нужно будет вызывать его более 10000 на запрос (стоимость в значительной степени покрывается вызовами Response.Write). А этого, скорее всего, не произойдет.
от отражателя
public static HttpContext get_Current()
{
return (ContextBase.Current as HttpContext);
}
ContextBase вызовов, который звонит
public static object HostContext
{
get
{
object hostContext =
Thread.CurrentThread.GetIllogicalCallContext().HostContext;
if (hostContext == null)
{
hostContext = GetLogicalCallContext().HostContext;
}
return hostContext;
}
...
таким образом, существует немного продолжения 'материала' поточной обработки; определенное я действительно не знаю.
Это не интенсивно вообще. Я не знаю, почему я не попробовал это в первый раз:
System.Diagnostics.Stopwatch sp = new System.Diagnostics.Stopwatch();
// With HttpContext.Current:
sp.Start();
for (int i = 0; i < 100; i++)
{
HttpContext.Current.Response.Output.Write(i.ToString());
}
sp.Stop();
long result1 = sp.ElapsedTicks;
// Without:
TextWriter output2 = HttpContext.Current.Response.Output;
sp.Reset();
sp.Start();
for (int i = 0; i < 100; i++)
{
output2.Write(i.ToString());
}
sp.Stop();
long result2 = sp.ElapsedTicks;
И мои компьютерные результаты вокруг:
result1 = 395 галочек result2 = 332 галочки
Таким образом, это довольно быстро!