bxslider reloadSlider reload the slider and brakes the cicle

Question

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);

score 2 · Accepted Answer · edited Jul 05 '16 at 14:07

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.

thanks for you answer but it's still resizeing badly.each time I resize the slider start from the number o — user2505665, Feb 27 '14 at 13:24
this.getCurrentSlide is not a function startnum=this.getCurrentSlide(); — user2505665, Feb 27 '14 at 13:27
@user2505665 Yep! you got me there. I'll update my answer. Hopefully what i did worked for you. — DhruvJoshi, Feb 27 '14 at 14:06
still an error: currentSlideNumber.getCurrentSlide is not a function startnum=currentSlideNumber.getCurrentSlide(); — user2505665, Feb 27 '14 at 15:15
if you still there would be lovely if you could help me to fix this. the settings should work without seeing the reload on resize as the meant to be responsive. — user2505665, Feb 27 '14 at 15:32
@user2505665 I'd updated my answer with working demo. Please do check it. — DhruvJoshi, Feb 28 '14 at 07:05
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48681/discussion-between-user2505665-and-dhruvjoshi) — user2505665, Feb 28 '14 at 11:39
Have tried to use slider.redrawSlider(); on window resize event? I have just tested it and it's working pretty good. — AldorEla, Jul 03 '15 at 17:40

bxslider reloadSlider reload the slider and brakes the cicle

1 Answers1