В. Я пытаюсь перезагрузить слайдер, чтобы получить полностью адаптивный макет. Для этого мне нужно перезагрузить слайдер! основная проблема в том, что ползунок меняется, потому что перезагружается. Так что это начинается с первого слайда каждый раз, когда я изменяю размер.
может ли кто-нибудь указать мое решение, чтобы не было этого скачка слайдов при перезагрузке/изменении размера???
Кошмар! Кошмар! Кошмар! http://jsfiddle.net/j3hgA/17/
// initiates responsive slide gallery
var settings = function () {
var settings1 = {
pager: 'false',
minSlides: 1,
maxSlides: 1,
startSlide: 1,
moveSlides: 1,
onSlideBefore:
function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('#carousel > li.active').removeClass('active');
$('#carousel > li').eq(currentSlideHtmlObject - 1).addClass('active');
},
onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('#carousel > li.active').removeClass('active');
$('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
},
onSliderLoad: function (currentSlideHtmlObject) {
$('#carousel').removeClass('settings2');
$('#carousel').css('display', 'block').addClass('settings1');
$('#carousel').fadeIn('slow');
$('#carousel > li.active').removeClass('active');
$('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
$('.bx-controls').hover(
function () {
$('#carousel li a figure').addClass("hover").end();
},
function () {
$('#carousel li a figure').removeClass("hover").end();
});
}
};
var settings2 = {
pager: 'true',
minSlides: 1,
maxSlides: 3,
startSlide: 0,
moveSlides: 1,
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('#carousel > li.active').removeClass('active');
$('#carousel > li').eq(currentSlideHtmlObject - 1).addClass('active');
},
onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('#carousel > li.active').removeClass('active');
$('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
},
onSliderLoad: function (currentSlideHtmlObject) {
$('#carousel').removeClass('settings1');
$('#carousel').css('display', 'block').addClass('settings2');
$('#carousel').fadeIn('slow');
$('#carousel > li.active').removeClass('active');
$('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
$('.bx-controls').hover(
function () {
$('#carousel li a figure').addClass("hover").end();
},
function () {
$('#carousel li a figure').removeClass("hover").end();
});
}
};
return ($(window).width() < 1600) ? settings1 : settings2;
}
var mySlider;
function tourLandingScript() {
mySlider.reloadSlider(settings());
}
mySlider = $('#carousel').bxSlider(settings());
$(window).resize(tourLandingScript);