Stefaneus Ответов: 1

Заставьте bootstrap caraousel работать с бритвой ASP.NET ядро и привязка моделей

Здравствуйте, кто - нибудь может мне помочь с этим? я пытаюсь сделать карусель с bootstrap, и я использую изображения из моей БД, но, как вы можете видеть на картинке, оба изображения показывают без учета карусели, есть идеи, как я могу это исправить? код выглядит примерно так.


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@for (int i = 0; i < Model.car.Images.Count; i++)
{
if (i == 0)
{
<li data-target="#carouselExampleIndicators" data-slide-to="@i" class="active"></li>
}
<li data-target="#carouselExampleIndicators" data-slide-to="@i"></li>
}
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
@if (Model.car.Images != null)
{
@foreach (var i in Model.car.Images)
{
<img class="img-fluid" src="~/Images/Cars/@i.Filename" alt="First slide">
}
}
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>


Что я уже пробовал:

Я протестировал, чтобы разместить цикл for и цикл foreach в разных местах, но безрезультатно, у кого-нибудь есть какое-нибудь решение?

1 Ответов

Рейтинг:
1

dnxit

Я сделал это так, хотя я не читаю его из БД, в папке были файлы изображений 

@if (showBanner)
{
	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="6000">
		<ol class="carousel-indicators">
		@{
			for (int i = 0; i < 20; i++)

			{

				<li data-target="#carouselExampleIndicators" data-slide-to="@(i.ToString())" @(i == 1 ? "class='active'" : "")></li>
			}
		}
		</ol>
		<div class="carousel-inner">
		@{
			for (int i = 1; i <= 20; i++)

			{

			<div class="carousel-@(i == 1 ? "item active" : "item")">
			<img class="d-block w-100" src="~/images/carousel@(i.ToString()).jpg" alt="title">
			<div class="carousel-caption d-none d-md-block">
				Some Caption Text
  			    </div>
			</div>
			}
		}
	</div>
	<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	}