I am using Slick Slider as a mobile menu. The items in the slick slider toggle bootstrap tabs.

var $slider = $('.mobilenav .mobile-tabs .slider');

$slider.slick({
    prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>',
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    focusOnSelect: true,
    centerMode: true,
    centerPadding: 0,
    slickFilter : ':not(.hide-slide)'
});

$slider.on('afterChange', function(event, slick, currentSlide, nextSlide) {
    $('.mobile-tab').removeClass('active');
    $('.slick-current').find('a').addClass('active');
    $('.slick-current').find('a').trigger('click');
});


<div class="mobilenav">
    <div class="col-sm-12 mobile-tabs">
        <div class="slider nav nav-pills">
            <div>
                <a class="mobile-tab active" href="#tab1" data-toggle="tab">
                <span class="fa fa-home"></span>Tab 1</a>
            </div>
            <div>
                <a class="mobile-tab" href="#tab2" data-toggle="tab">
                <span class="fa fa-home"></span>Tab 2</a>
            </div>
            <div>
                <a class="mobile-tab" href="#tab3" data-toggle="tab">
                <span class="fa fa-home"></span>Tab 3</a>
            </div>
        </div>
    </div>
</div>

Everything works fine when you click the tabs directly. When you use the previous/next arrows to switch tabs is when the problem occurs. When the previous/next arrows are used the tab content area for tab does not change. It seems like it is not detecting the click event on the menu item which when clicked directly by a user toggle the tab change, but when called by triggering a click with jQuery after the prev/next arrows are used does not work.