autoWidth breaks the slider

[Frédéric Pilon]

Issue description:

autoWidth breaks the slider. It makes my slider think there is only 1 slide so the next/previous doesnt work (and the builtin controls simply dont happen.)

Demo link/slider setting:

var overflowing_slider = tns({
            container: '#overflowing-slider-'+name,
            autoWidth:true,
            //viewportMax:100,
            //items:3,
            loop: true,
            center: false,
            mouseDrag: true,
            //slideBy: 1,
            swipeAngle: false,
            //speed: 400,
            autoplay: false,
            controlsText: ['<svg class="icon icon-previous"><use xlink:href="#icon-previous"></use></svg>', '<svg class="icon icon-next"><use xlink:href="#icon-next"></use></svg>'],
            controlsPosition:"bottom",
            //navPosition:"bottom",
            nav:false,
            onInit(info) {
                info.controlsContainer.setAttribute('tabindex', -1);
                info.nextButton.setAttribute('tabindex', 0);
                info.prevButton.setAttribute('tabindex', 0);
            },
            responsive: {
                250: {
                    gutter: 16,
                    //edgePadding: position.left,
                },
                992: {
                    gutter: 16,
                    //edgePadding: position.left,
                }

            },
        });

Tiny-slider version: 2.9.4
Browser name && version: Chrome latest
OS name && version: MacOS.

[gauravjaggi]

I face same issue and try this zoom IN/OUT code. its working for me, You can try this hope it will work.

Thanks
Er Malkeet Khang

setTimeout(function(){
var currentZoomH = $('.tns-ovh').width();

currentZoomH = currentZoomH - 5
$('.tns-ovh').width(currentZoomH);

currentZoomH = currentZoomH + 5;
$('.tns-ovh').width(currentZoomH);

}, 1000);

[Victor S.]

Any update? I'm in same situation.

[Matthew Grasmick]

I'm hitting the same issue. I notice that it does not occur if I remove the image from the slide and instead have just text. It also only seems to occur on the first couple of page loads. If refreshed repeatedly, it will start to work. Clearing caches causes the problem to come back temporarily. I find that removing the the width attribute from the img tag improves things, but the problem still occurs at some breakpoints. Finally, removing lazy loading from the image tag also improves things.

I've successfully worked around the issue my removing the img tag and instead creating a div with the image as the background-image for that div.