Click here to Skip to main content
14,387,927 members
Rate this:
Please Sign up or sign in to vote.
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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

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

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100