autoWidth breaks the slider
fredy31 opened this issue · comments
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.
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);
Any update? I'm in same situation.
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.