Scrolling Tabs in Bootstrap 4

Question

I am working on scrolling tab. Below is my code. I am facing problem that I am not able to click middle tabs. On right button click tabs scrolls move it gradually. What should I do to move tabs gradually? Please help

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function() {
    var itemsWidth = 0;
    $('.list a').each(function() {
        var itemWidth = $(this).outerWidth();
        itemsWidth += itemWidth;
    });
    return itemsWidth;
};

var widthOfHidden = function() {
    return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
};

var getLeftPosi = function() {
    return $('.list').position().left;
};

var reAdjust = function() {
    if (($('.wrapper').outerWidth()) < widthOfList()) {
        $('.scroller-right').show().css('display', 'flex');
    } else {
        $('.scroller-right').hide();
    }

    if (getLeftPosi() < 0) {
        $('.scroller-left').show().css('display', 'flex');
    } else {
        $('.item').animate({
            left: "-=" + getLeftPosi() + "px"
        }, 'slow');
        $('.scroller-left').hide();
    }
}

reAdjust();

$(window).on('resize', function(e) {
    reAdjust();
});

$('.scroller-right').click(function() {

    $('.scroller-left').fadeIn('slow');
    $('.scroller-right').fadeOut('slow');

    $('.list').animate({
        left: "+=" + widthOfHidden() + "px"
    }, 'slow', function() {

    });
});

$('.scroller-left').click(function() {

    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');

    $('.list').animate({
        left: "-=" + getLeftPosi() + "px"
    }, 'slow', function() {

    });
});

Fiddle http://jsfiddle.net/vedankita/2uswn4od/13

Help me to scroll slowly on button click so that I can click on ease tab. Thanks

Starlet

What do you want to do? it is quite confusing to understand from what you wrote. – Polyunsaturated

When I click on right button to scroll tabs it scrolls to end thats why I am not able to click tabs which are placed in middle – Starlet

I am able to click tab 8 without any issue – Polyunsaturated

check resizing window you will understand my problem. Please minimize screen and check – Starlet

You should move it gradually by 50px and it should work. – Polyunsaturated

can you please help me with this – Starlet

Check this out codepen.io/srees/pen/pgVLbm – Polyunsaturated

no same poroblem in this – Starlet

Answer 1

You should incrementally move the tabs "width of hidden", but no more than wrapper width...

var widthOfHidden = function(){

    var ww = 0 - $('.wrapper').outerWidth();
    var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;

    if (ww>hw) {
        return ww;
    }
    else {
        return hw;
    }

};

var getLeftPosi = function(){

    var ww = 0 - $('.wrapper').outerWidth();
    var lp = $('.list').position().left;

    if (ww>lp) {
        return ww;
    }
    else {
        return lp;
    }
};

And then "readjust" after each movement to determine whether or not the scroll arrows still need to show...

$('.scroller-right').click(function() {

  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');

  $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
    reAdjust();
  });
});

$('.scroller-left').click(function() {

    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');

    $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
        reAdjust();
    });
}); 

Demo: https://www.codeply.com/go/Loo3CqsA7T

---

Also, you can improve the position of the last tab by making sure it's right position is never less than wrapper width to keep it aligned to the right edge...

var widthOfHidden = function(){

    var ww = 0 - $('.wrapper').outerWidth();
    var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
    var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());

    if (ww>hw) {
        return (rp>ww?rp:ww);
    }
    else {
        return (rp>hw?rp:hw);
    }
};

Schreibman

Hi @Zim. I have implemented your code working fine but facing one problem when I continuosly click on left right buttons then tablist going away from area. Sometimes it not working normally. can you please help with this – Starlet

Answer 2

https://embed.plnkr.co/NcdGqX/

Look at this example. this tabs move gradually. and also you can use bootstrap 4.

I hope it might be helpful.

Kerrill

Thanks @Uday but I want to do this without any plugin.Thank you – Starlet