Я использовал owl.carousel.js.
На странице у меня есть это:
<div id="home-slider" class="home-slider">
</div>
Через ajax и jquery Я перебираю коллекциюизображения и пытается скользить, но он повторяет каждое изображение по горизонтали вместо скольжения.
$(document).ready(function()
{
var url = '@Url.Action("getImages", "Gallery")';
var data = ''
$.get(url, data, function (response) {
$.each(response, function (i, val) {
$("#home-slider").append("<div id=\"" + 'Outdiv' + i + "\" class='item home-slider-bg'></div>");
var url = '../Content/images/' + val.Image;
$("#Outdiv" + i).attr("style", "background-image:url(\""+url +"\")");
});
});
});
Почему?
Обновление:
Все хорошо, если я добавляю div с классом= 'item home-slider-bg, вручную и установите его background-image, тогда он будет работать так:
<div id="home-slider" class="home-slider">
<div class="item home-slider-bg" style="background-image: url('/Content/images/slider-1.jpg')">
</div>
<div class="item home-slider-bg" style="background-image: url('/Content/images/slider-2.jpg')">
</div>
</div>