C#•2w ago

Slider Image

Why Im having an issue with the images not displaying correctly in the slider

30 Replies

c#
 <div class="product-slider">
     @foreach (var image in Model.PetImages)
     {
             <div class="product-slider-item my-4" data-image="/images/pets/@image.ImageUrl"
                 data-slick-index="@Model.PetImages.IndexOf(image)"
                 aria-hidden="@(Model.PetImages.IndexOf(image) == 0 ? "false" : "true")"
                 tabindex="@(Model.PetImages.IndexOf(image) == 0 ? "0" : "-1")" style="width: 730px;">
                 <img class="d-block img-fluid w-100"
                     src="@(string.IsNullOrEmpty(image.ImageUrl) ? "/images/default-image.webp" : "/images/pets/" + image.ImageUrl)"
                     alt="Pet Image">
             </div>
     }

     <i class="fa fa-chevron-right arrow-right slick-arrow"></i>

     <ul class="slick-dots" role="tablist">
         @foreach (var image in Model.PetImages)
         {
                 <li class="@(Model.PetImages.IndexOf(image) == 0 ? "slick-active" : "")"
                     role="presentation">
                     <img class="img-fluid"
                      src="@(string.IsNullOrEmpty(image.ImageUrl) ? "/images/pets/dog1_1.jpg" : "/images/pets/" + image.ImageUrl)"
                         alt="Pet Image">
                 <p>@image.ImageUrl</p>
             </li>
         }
     </ul>
 </div>

c#
 <div class="product-slider">
     @foreach (var image in Model.PetImages)
     {
             <div class="product-slider-item my-4" data-image="/images/pets/@image.ImageUrl"
                 data-slick-index="@Model.PetImages.IndexOf(image)"
                 aria-hidden="@(Model.PetImages.IndexOf(image) == 0 ? "false" : "true")"
                 tabindex="@(Model.PetImages.IndexOf(image) == 0 ? "0" : "-1")" style="width: 730px;">
                 <img class="d-block img-fluid w-100"
                     src="@(string.IsNullOrEmpty(image.ImageUrl) ? "/images/default-image.webp" : "/images/pets/" + image.ImageUrl)"
                     alt="Pet Image">
             </div>
     }

     <i class="fa fa-chevron-right arrow-right slick-arrow"></i>

     <ul class="slick-dots" role="tablist">
         @foreach (var image in Model.PetImages)
         {
                 <li class="@(Model.PetImages.IndexOf(image) == 0 ? "slick-active" : "")"
                     role="presentation">
                     <img class="img-fluid"
                      src="@(string.IsNullOrEmpty(image.ImageUrl) ? "/images/pets/dog1_1.jpg" : "/images/pets/" + image.ImageUrl)"
                         alt="Pet Image">
                 <p>@image.ImageUrl</p>
             </li>
         }
     </ul>
 </div>

Angius•2w ago

What's the generated HTML look like?

ShuajbM•2w ago

message.txt

Angius•2w ago

Not what I asked for

ShuajbM•2w ago

wym

Angius•2w ago

The final, complete, generated, filled with data HTML that the browser gets Not the template code

ShuajbM•2w ago

Angius•2w ago

The HTML code

ShuajbM•2w ago

this is the PetViewModel

Angius•2w ago

Not a screenshot

ShuajbM•2w ago

actually its Details.cshtml the code that i sent earlier

Angius•2w ago

The GENERATED code Not the SOURCE code The browser does not receive the .cshtml template The browser receives the final, complete, generated HTML code I want that Not a screenshot Not the template The HTML Right-click the page in the browser and view page source

ShuajbM•2w ago

do you mean inspect

ShuajbM•2w ago

this one ?

Gaming

Programming

Slider Image