bxslider reloadSlider reload the slider and brakes the cicle
QI 'm trying to reload the slider in order to have a fully responsive layout. To do that I need to reload the slider! the main issue is that the slider changes because reloads. So it's starts from the first slide every time I resize.
could anyone indicate my a solution to not have this jump of slides on reload/resize???
nightmare!nightmare!nightmare! 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);
Answer
You can store the current slide number using getCurrentSlide() and use that as starting startSlide.
Now the method getCurrentSlide() can be called on bxSlider object only. Therefore it must be called after bxSlider has been initialised otherwise it will give an undefined value.
Which is what was happening earlier.
So I went ahead and modified some of your code to create this working example.
<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 does not loads bxslider using the CDN link that you added in the fiddle.
When you are using your own classes, always pass
useCSS:falseto bxSlider object otherwise you may see some random behavior.You can uncomment the commented line in
tourLandingScript()to verify values.Also note that pager is on in one setting and off in another.