Tabs sliding problem

[vrinceanuv]

If i use the slider in multiple places in 1 page using tabs. When i click on a tab and i make that visible, when i click the next button of the slider it goes 2 slides next and after that as it should, any ideas?

Thank you

[snake-345]

Can you show code or site which have this problem?

[vrinceanuv]

http://vrinceanu.com/jslider/

Click tab 2 and click on gallery next image and you see that it goes 2 images at first, but after it works ok.

[snake-345]

I see problem. This is due to the fact that the slider is initialized with display: none. I'll see what can be done. Till you can to initialize the slider after the tab was showed. Example:

$(document).ready(function () {
    function showTab(tab) {
        var jcarousel = tab.find('[data-jcarousel]');
        tab.show();

        if (!$.isPlainObject(jcarousel.data('jcarousel'))) {
            jcarousel.each(function() {
                var el = $(this);
                el.jcarousel(el.data());
            });

            tab.find('[data-jcarousel-control]').each(function() {
                var el = $(this);
                el.jcarouselControl(el.data());
            });
        }
    }

    showTab($('.tab1'));

    $('.tab1-show').on('click', function () {
        showTab($('.tab1'))
        $('.tab2').hide();
    });

    $('.tab2-show').on('click', function () {
        $('.tab1').hide();
        showTab($('.tab2'))
    });
});

[vrinceanuv]

Will try that, thanks for the help. This applies to modals as well, just to give another example of the same issue. Thanks again

[vrinceanuv]

@snake-345 Added what you told me to, now the problem appears from the start, no need to go to another tab, which is not working anymore though(not to worry about).

http://vrinceanu.com/jslider/#

[snake-345]

use

showTab($('.tab1'));

instead

$('.tab1').show();

[snake-345]

And you should send jQuery object in showTab function instead string. Just copy my code and paste to you site and it should work)

[vrinceanuv]

@snake-345 I was too tired and wrote the bad code, now tabs work, the thing is this is replicating for the first displayed tab even if i applied your piece of code.

http://vrinceanu.com/jslider/

[snake-345]

Man, just copy-paste my code pls. Fully. I see the difference between my code and your code. And remove

<script type="text/javascript" src="jcarousel.data-attributes.js"></script>

because you initialized jcarousel when tab showed.

[vrinceanuv]

@snake-345 It worked. I realised i need to sleep more though. Thank you for the help provided.