jQuery bxslider ajax load

Question

我想在bx滑块中动态加载图像，效果很好，我可以预加载下一个和上一个图像，但我在onSliderLoad事件中遇到了问题，当我调用模式窗口中的滑块时，加载第一个图像。我有一个物体，里面有一些未定义的东西。。。

谢谢你的帮助。

$(".showmod").on('click', function(e) {
e.preventDefault();
var content = $("#modal-container").find('.content');
var url = $(this).attr('data-ref');
$.get(url, function(data) {
content.html(data);
ajaxImageLoad();
}, "html");
$("body").css("overflow", "hidden");
$(".modal-container").addClass('visible');
setTimeout(animation_entree, 500);
$(".modal-container").css("overflow", "auto");
});
function ajaxImageLoad(imagenum = 0) {
$('.slider').bxSlider({
adaptiveHeight: true,
keyboardEnabled: true,
pagerType: 'short',
startSlide: imagenum,
useCSS: false,
onSlideNext: function(newIndex) {
$('.active-slide').removeClass('active-slide');
$('.go').removeClass('go');
var $nextSlide = newIndex.next().find('.lazy');
newIndex.find('.comment').addClass('active-slide');
newIndex.find('.animate').addClass('go');
var $lazy = newIndex.find(".lazy");
var $load = $lazy.attr("data-src");
var $nextload = $nextSlide.attr("data-src");
$lazy.attr("src", $load).removeClass("lazy");
$nextSlide.attr("src", $nextload).removeClass("lazy");
},
onSlidePrev: function(newIndex) {
$('.active-slide').removeClass('active-slide');
$('.go').removeClass('go');
var $previousSlide = newIndex.prev().find('.lazy');
newIndex.find('.comment').addClass('active-slide');
newIndex.find('.animate').addClass('go');
var $lazy = newIndex.find(".lazy");
var $load = $lazy.attr("data-src");
var $nextload = $previousSlide.attr("data-src");
$lazy.attr("src", $load).removeClass("lazy");
$previousSlide.attr("src", $nextload).removeClass("lazy");
},
onSliderLoad: function(currentIndex) {
// this is the messy part :-)
var $lazy = $('.slider').eq(currentIndex).find(".lazy");
var $load = $lazy.attr("data-src");
console.log(currentIndex + ' - ' + $lazy + ' ' + $load);
$lazy.attr("src", $load).removeClass("lazy");
$('.slider .comment').eq(currentIndex + 1).addClass('active-slide');
}
});
}

<div class="slider">
<div>
<img class="lazy" src="img/loader.svg" data-src="img/images-portfolio/sdb-exercice-final.jpg" alt="Modélisation et rendu 3D Studio Max" />
<div class="comment">
<h4>3D Studio Max</h4>
</div>
</div>
</div>

Answer 1

这是的解决方案

添加infiniteLoop:false参数以避免bxslider创建幻灯片的克隆。

$('.slider').bxSlider({
adaptiveHeight:   true,
keyboardEnabled: true,
pagerType: 'short',
startSlide: imagenum,
useCSS: false,
infiniteLoop: false,
hideControlOnEnd: true
});