Estoy intentando volver dinámico un slider si lo cargo de forma estatica todo funciona bien pero a la hora de usar razor no me carga las imagenes, pero si me carga las letras y el slider en general pero no se ve porque no aparecen las imagenes, sospecho que es porque para cargar las imagenes uso css.
Este es 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>
}
Mi clase
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"; } }
}
disculpen si lo que pregunto es muy ovbio, recien estoy empezando