bxslider reloadSlider перезагружает ползунок и тормозит колесо
-
21-12-2019 - |
Вопрос
Я пытаюсь перезагрузить слайдер, чтобы получить полностью адаптивный макет.Чтобы сделать это, мне нужно перезагрузить слайдер!основная проблема заключается в том, что ползунок меняется из-за перезагрузки.Таким образом, это начинается с первого слайда каждый раз, когда я изменяю размер.
может ли кто-нибудь указать мое решение, чтобы не было такого перехода слайдов при перезагрузке / изменении размера???
кошмар!кошмар!кошмар! 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);
Решение
Вы можете сохранить текущий номер слайда, используя getCurrentSlide()
и используйте это как отправную точку startSlide
.
Теперь о методе getCurrentSlide()
может быть вызван только для объекта bxSlider.Следовательно, он должен быть вызван после инициализации bxSlider, в противном случае он выдаст undefined
ценность.Именно это и происходило ранее.Поэтому я пошел дальше и изменил часть вашего кода, чтобы создать этот рабочий пример.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
var startnum=0,mySlider, settings1 = {
pager:true,
startSlide: 0,
auto:false,
useCSS:false,
onSlideBefore:function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {},
onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {},
onSliderLoad: function (currentSlideHtmlObject) {}
}, settings2 = {
pager: false,
startSlide: 0,
auto:false,
useCSS:false,
onSlideBefore:function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {},
onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {},
onSliderLoad: function (currentSlideHtmlObject) {}
};
function settings() {return ($(window).width() < 1200) ? settings1:settings2;}
mySlider=$('.bxslider').bxSlider(settings());
function tourLandingScript() {
//alert(settings() +" "+ mySlider.getCurrentSlide());
mySlider.reloadSlider($.extend(settings(),{startSlide:mySlider.getCurrentSlide()}));
}
$(window).resize(tourLandingScript);
});
</script>
</head>
<body>
<ul class="bxslider" >
<li><img src="http://www.learningrx.com/images/cognitive-definition.jpg"/></li>
<li><img src="http://designshack.co.uk/wp-content/uploads/multibkg-3.jpg" /></li>
<li><img src="http://designshack.co.uk/wp-content/uploads/multibkg-2.jpg" /></li>
<li><img src="http://designshack.co.uk/wp-content/uploads/multibkg-4.jpg" /></li>
</ul>
</body>
</html>
PS:
jsfiddle не загружает bxslider по ссылке CDN, которую вы добавили в скрипте.
Когда вы используете свои собственные классы, всегда передавайте
useCSS:false
к объекту bxSlider, в противном случае вы можете увидеть какое-то случайное поведение.Вы можете раскомментировать закомментированную строку в
tourLandingScript()
для проверки значений.Также обратите внимание, что пейджер включен при одной настройке и выключен при другой.