Home / Questions / 180168
Accepted
Ceci Benitez
Asked: 2020-07-14 08:46:02 +0800 CST 2020-07-14 08:46:02 +0800 CST

Why doesn't my slider load images?

  • 772

I'm trying to make a slider dynamic if I load it statically everything works fine but when I use razor it doesn't load the images, but it does load the letters and the slider in general but it can't be seen because the images don't appear, I suspect which is because to load the images I use css.

this is javascript 

jQuery(document).ready(function () {

    "use strict";

    $('.slider-carousel').caroufredsel({
        responsive: true,
        width: '100%',
        circular: true,

        scroll:
            {
                items: 1,
                duration: 1500,
                pauseOnHover: true
            },

        auto: true,

        items:
            {
                visible:
                    {
                        min: 1,
                        max: 1
                    },

                height: "variable"
            }
    });
});
Este es CSS

.img1 {
    background: url('../img/slider/1.png');
    background-size: 100% 100%;
}

.img2 {
    background: url('../img/slider/2.png');
    background-size: 100% 100%;
}

.img3 {
    background: url('../img/slider/3.png');
    background-size: 100% 100%;
}
Este es razor


@if(Model.VMRepositorioSlides != null)
{
    <div class="slider">
        @foreach(Slide slide in Model.VMRepositorioSlides.GetSlides())
        {
        <ul class="slider-carousel">
            <li class="@Model.VMSlide.claseSlide">
               <div class="col-md-4">
                   <h3>@Model.VMSlide.TituloSlide</h3>
                   <p class="texto-slider">@Model.VMSlide.DescripcionSlide</p>
                   <p class="rosa-bold">@Model.VMSlide.SpanSlide</p>
               </div>
            </li>
        </ul>
        }
    </div>
}

My class

public class Slide 
{ 
   public int IdSlide { get; set; } 
   public string TituloSlide { get; set; } 
   public string DescripcionSlide { get; set; } 
   public string SpanSlide { get; set; } 
   public string MostrarTextoSlide { get { return TituloSlide; } } 
   public string CoverSlide { get { return TituloSlide.Replace(" ", "-").ToLower() + ".png"; } } 
}

excuse me if what I ask is very obvious, I'm just starting

javascript

1 Answers

  1. Best Answer

    @if(Model.VMRepositorioSlides != null)
{
    <div class="slider">
        @foreach(Slide slide in Model.VMRepositorioSlides.GetSlides())
        {
        <ul class="slider-carousel">
            <li class="img">
                <a href="@Url.Action("Slide", new { idSlide= slide.IdSlide})">
                    <img src="~/img/slider/@slide.CoverSlide" />
                </a>
                <div class="col-md-4">
                    <h3>@slide.TituloSlide</h3>
                    <p class="texto-slider">@slide.DescripcionSlide</p>
                    <p class="rosa-bold">@slide.SpanSlide</p>
                </div>
            </li>
        </ul>
        }
    </div>
}

    • 0