tiny-slider
tiny-slider copied to clipboard
[Request] "axis" on responsive
I'm using this slider in the vertical axis for large screen, but I need to slide from left to right or right to left in mobile. So, please add this feature.
Sorry for the late response.
Changing axis will totally rewrite the slider. So I don't suggest to put this option into responsive
which will make the slider too complicated. You can manually destroy()
and rebuild
it again when reach the breakpoints.
Same isue here, will try suggestion of @ganlanyuan
Hi, destroy() not working on tiny-slider 2.8.6 on Chrome 69 - macos 10.14 throw error:
function getSlidePositions () {
slidePositions = [0];
var attr = horizontal ? 'left' : 'top',
first = slideItems[0].getBoundingClientRect()[attr], // Uncaught TypeError: Cannot read property '0' of null
position;
for (var i = 1; i < slideCountNew; i++) {
position = slideItems[i].getBoundingClientRect()[attr];
slidePositions.push(position - first);
}
}
My slider
var thumb_carousel = tns({
loop: false,
container: '#thumbnail-images',
gutter: 10,
items: 5,
mouseDrag: true,
nav: false,
controls: false,
axis: 'vertical'
});
if ( window.matchMedia( '( max-width: 767px )' ).matches ) {
thumb_carousel.destroy();
/*thumb_carousel = thumb_carousel.rebuild({
axis: 'horizontal'
});*/
}
// How i can rebuild with other option like comment above??
Issue still here...
Need solution for this issue...
@des-tes @notrealdev You can do something like this :
let tnsOptions = {
loop: false,
container: '#thumbnail-images',
gutter: 10,
items: 5,
mouseDrag: true,
nav: false,
controls: false,
axis: 'vertical'
};
if(document.getElementsById('thumbnail-images').length > 0 && tns !== undefined) {
let thumb_carousel = undefined,
thumbsOpts = {};
let wait = null;
function iniThumbs(){
if(wait !== null) clearTimeout(wait);
wait = setTimeout(function(){
if(typeof thumb_carousel === 'object') thumb_carousel.destroy();
if ( window.matchMedia( '( min-width: 768px )' ).matches ) {
// Set options for screen wider than 768px width
thumbsOpts = {}
}
else {
// Set options for screen smaller than 768px width
thumbsOpts = {};
}
thumb_carousel = tns(Object.assign({},tnsOptions,thumbsOpts));
},250);
}
// Reset on orientation change for mobile
window.addEventListener('orientationchange',iniThumbs);
// Reset on resize
window.addEventListener('resize',iniThumbs);
// Initialize at load
iniThumbs();
}
I've noticed that the error appears when you destroy then rebuild the slider too quickly (that's the reason for the time out).
Also, in the doc says
slider = slider.rebuild(); // this method returns a new slider Object with the same options with the original slider
That's why you have to reinit completely the slider after destroying it if you want to change the settings like the axis.
@ganlanyuan However, I'm of those who'd really like the axis option as a responsive feature :)
I can't make axis responsive, the solution still destroy the object and then rebuild it? I've been trying the solutions in the responses above but I can't make it.
if ($(this).width() < 576) {
slider.destroy();
var slider = tns({
container : '#my-slider',
items : 7,
gutter : 5,
axis : "vertical",
mouseDrag : "mouseDrag",
useLocalStorage : true,
controlsContainer : '#controls',
prevButton : '.previous',
nextButton : '.next',
nav:false
});
slider = slider.rebuild();
} else{
var slider = tns({
container : '#my-slider',
items:4,
useLocalStorage : true,
autoWidth: true,
controlsContainer : '#controls',
prevButton : '.previous',
nextButton : '.next',
mouseDrag : "mouseDrag",
nav:false
});
slider.destroy();
slider = slider.rebuild();
}
}).trigger('resize');
I don't know if a I'am following the correct syntaxis