[Request] "axis" on responsive

[des-tes]

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.

[ganlanyuan]

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.

[notrealdev]

Same isue here, will try suggestion of @ganlanyuan

[notrealdev]

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??

[notrealdev]

Issue still here...

[notrealdev]

Need solution for this issue...

[Xarksass]

@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 :)

[AaronJimenez96]

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