Click here to Skip to main content
15,844,152 members
Please Sign up or sign in to vote.
1.60/5 (2 votes)
Hello can anyone help me with this? i am trying to make a carousel with bootstrap, and i am using images from my db, but as you can see in the picture, both images are showing with no consideration to the carousel, any ideas how i can fix this? the code looks like this.


<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>


What I have tried:

I have tested to place the for loop and the foreach loop in different places but to no avail, anyone got any solution?
Posted
Updated 21-Oct-19 21:07pm

1 solution

I've done it like that, though I'm not reading it from db, a folder had image files

HTML
@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>
	}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900