Slide and 100%

[bastiangeneugelijk]

With the width of a slide on 100%, 'fade' as animtype works perfect, but 'slide' is not working.

[GuiHarrison]

I would love to be able to do that as well.

[gshilin]

me too

[fului]

I had a bit of the same problem, as I'm using bootstrap and used the 1200 container width, in this case 730px as the bjqs width, but when I would start it at a smaller screen resolution, the images in the slideshow, type slide, would offset, due to the max width being 730px and the actual container being 597px.

I think I have fixed this, but changing a bit of the code in the bjqs file. I changed the initial width from settings.width to responsive.width from line 243, as seen below and until now, I haven't seen any issues with it.

  if(settings.animtype === 'slide'){
    // initial setup
    $slides.css({
        'height'        : settings.height,
        'width'         : responsive.width
    });
    $slides.children('img').css({
        'height'        : settings.height,
        'width'         : responsive.width
    });
    $slider.css({
        'height'        : settings.height,
        'width'         : responsive.width * settings.slidecount
    });
    $wrapper.css({
        'height'        : settings.height,
        'max-width'     : settings.width,
        'position'      : 'relative'
    });

    if(responsive.width < settings.width){

Hope this helps somebody.

[fului]

sorry, right after I posted this, I of course found a bug in my above code, here is how it should look.

$slider.css should still use the settings.width to calculate the full width size, so it is only the two first settings that need to change.

if(settings.animtype === 'slide'){
    // initial setup
    $slides.css({
        'height'        : settings.height,
        'width'         : responsive.width
    });
    $slides.children('img').css({
        'height'        : settings.height,
        'width'         : responsive.width
    });
    $slider.css({
        'height'        : settings.height,
        'width'         : settings.width * settings.slidecount
    });
    $wrapper.css({
        'height'        : settings.height,
        'max-width'     : settings.width,
        'position'      : 'relative'
    });

    if(responsive.width < settings.width){

[fului]

so I again found an issue with my above solution, on resizing from big to smaller screen sizes, as it seems that the settings.slidecount, does not exist, it is called state.slidecount.

here is the new full code, from line 243 to 314 in the bjqs file.

            if(settings.animtype === 'slide'){

                // initial setup
                $slides.css({
                    'height'        : settings.height,
                    'width'         : responsive.width
                });
                $slides.children('img').css({
                    'height'        : settings.height,
                    'width'         : responsive.width
                });
                $slider.css({
                    'height'        : settings.height,
                    'width'         : responsive.width * state.slidecount
                });
                $wrapper.css({
                    'height'        : settings.height,
                    'max-width'     : settings.width,
                    'position'      : 'relative'
                });

                if(responsive.width < settings.width){

                    $slides.css({
                        'height'        : responsive.height
                    });
                    $slides.children('img').css({
                        'height'        : responsive.height
                    });
                    $slider.css({
                        'height'        : responsive.height
                    });
                    $wrapper.css({
                        'height'        : responsive.height
                    });

                }

                $(window).resize(function() {

                    // calculate and update dimensions
                    responsive.width    = $wrapper.outerWidth(),
                    responsive.ratio    = responsive.width/settings.width,
                    responsive.height   = settings.height * responsive.ratio;

                    $slides.css({
                        'height'        : responsive.height,
                        'width'         : responsive.width
                    });
                    $slides.children('img').css({
                        'height'        : responsive.height,
                        'width'         : responsive.width
                    });
                    $slider.css({
                        'height'        : responsive.height,
                        'width'         : responsive.width * state.slidecount
                    });
                    $wrapper.css({
                        'height'        : responsive.height
                    });
                    $canvas.css({
                        'height'        : responsive.height,
                        'width'         : responsive.width
                    });

                    resize_complete(function(){
                        go(false,state.currentslide);
                    }, 200, "some unique string");

                });

            }

This now seems to be working in all resize tests for me.

[lindaweinmer]

THANK YOU! You saved my day!

[panda7789]

Lot of thanks for ya :)

[nadira84]

so I again found an issue with my above solution, on resizing from big to smaller screen sizes, as it seems that the settings.slidecount, does not exist, it is called state.slidecount.

here is the new full code, from line 243 to 314 in the bjqs file.

            if(settings.animtype === 'slide'){

                // initial setup
                $slides.css({
                    'height'        : settings.height,
                    'width'         : responsive.width
                });
                $slides.children('img').css({
                    'height'        : settings.height,
                    'width'         : responsive.width
                });
                $slider.css({
                    'height'        : settings.height,
                    'width'         : responsive.width * state.slidecount
                });
                $wrapper.css({
                    'height'        : settings.height,
                    'max-width'     : settings.width,
                    'position'      : 'relative'
                });

                if(responsive.width < settings.width){

                    $slides.css({
                        'height'        : responsive.height
                    });
                    $slides.children('img').css({
                        'height'        : responsive.height
                    });
                    $slider.css({
                        'height'        : responsive.height
                    });
                    $wrapper.css({
                        'height'        : responsive.height
                    });

                }

                $(window).resize(function() {

                    // calculate and update dimensions
                    responsive.width    = $wrapper.outerWidth(),
                    responsive.ratio    = responsive.width/settings.width,
                    responsive.height   = settings.height * responsive.ratio;

                    $slides.css({
                        'height'        : responsive.height,
                        'width'         : responsive.width
                    });
                    $slides.children('img').css({
                        'height'        : responsive.height,
                        'width'         : responsive.width
                    });
                    $slider.css({
                        'height'        : responsive.height,
                        'width'         : responsive.width * state.slidecount
                    });
                    $wrapper.css({
                        'height'        : responsive.height
                    });
                    $canvas.css({
                        'height'        : responsive.height,
                        'width'         : responsive.width
                    });

                    resize_complete(function(){
                        go(false,state.currentslide);
                    }, 200, "some unique string");

                });

            }

This now seems to be working in all resize tests for me.

Yes! It works! Thanks.