Использование bxslider в табах HTML

Всем привет.

Помогите, пожалуйста. Есть такой код:

<h1>Новости</h1>
            <ul class="tabs" data-page="{$arrayUri.target}">
                <li class="active liter_1">Литер 1</li>
                <li class="liter_2">Литер 2</li>
            </ul>
            <ul class="slider_body liter_1_ul">
                {foreach from=$news_subliterfirst item="item"}
                <li id="{$item.id}" pos_id="{$item.id}">
                    <h5>{$item.title}</h5>
                    <h3>{$item.date}</h3>
                    {$item.announce}
                    <span id="news_desc_{$item.id}" class="news_desc">
                        <h5>{$item.title}</h5>
                        <h3>{$item.date}</h3>
                        {$item.content}
                    </span>
                </li>
                {/foreach}
            </ul>
            <ul class="slider_body liter_2_ul">
                {foreach from=$news_sublitersecond item="item"}
                <li id="{$item.id}" pos_id="{$item.id}">
                    <h5>{$item.title}</h5>
                    <h3>{$item.date}</h3>
                    {$item.announce}
                    <span id="news_desc_{$item.id}" class="news_desc">
                        <h5>{$item.title}</h5>
                        <h3>{$item.date}</h3>
                        {$item.content}
                    </span>
                </li>
                {/foreach}
            </ul>

И такой:

$('.liter_1').click(function() {
    $('.bx-wrapper').css('display', 'none');
    $('.bx-wrapper:eq(0)').css('display', 'block');
    $('.tabs li').removeClass('active');
    $(this).addClass('active');
});
$('.liter_2').click(function() {
    $('.bx-wrapper').css('display', 'none');
    $('.bx-wrapper:eq(1)').css('display', 'block');
    $('.tabs li').removeClass('active');
    $(this).addClass('active');
});

Смысл в том, что есть два таба, разделённые по дате. При клике по нему, должны появляться соответствующие новости в слайдере.

Табы сделаны в виде ul. В каждый таб сразу же загружается нужная инфа в цикле. Т.е., информация уже вся есть. Я переключаю табы просто путём изменения свойства display на block/none.

Первый таб отрабатывает так как нужно. Так как он виден сразу после загрузки страницы. А вот второй таб скрыт. Но он не отображается при клике на нём. Т.е., контент меняется и стили подставляются. Но на самой странице ни чего не видно. Я думал, что слайдер где-то ставит свойство прозрачности opacity: 0, но ни чего не нашёл такого.

Контролировал весь процесс в инспекторе кода. JavaScript отрабатывает как нужно. Т.е., целевой таб получает свойство display:block, а не нужный таб получает display:none. Но контент куда-то исчезает со страницы, хотя в html структуре он есть.

В чём может быть причина?