Need Help with Making a Bootstrap Carousel work in ASP.NET Razor Pages


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


  • @stefaneus1989

    I haven't worked with Razor Pages but there are a few things that stand out. Not sure if it will fix your problem.

    Concern 1)

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

    This would create two li elements for the first image in the car model. One active and one inactive.
    So maybe add an else statement right after the if statement.

    Concern 2)

    <div class="carousel-inner">
    
        <div class="carousel-item active">
    
          @if (Model.car.Images != null)
    ...
    

    The code above creates ONE parent div element for ALL img elements instead of a parent element for each img element. It also makes that one parent div element 'active'. There are multiple ways to fix this. Most straight forward way is to move the for each further up and then checking if you are iterating over the first element before applying the 'active' class.

    Concern 3)

      @foreach (var i in Model.car.Images)
    
            {
    
              <img class="img-fluid" src="~/Images/Cars/@i.Filename" alt="First slide">
    
            }
    ...
    

    I am not sure if this part will work for you but try replacing the 'img-fluid' with 'd-block w-100' for the class names.

    Let me know if that helped or if something was unclear.