jQuery 滑块不显示在 jQuery 选项卡系统中

和朋友一起，我们试图在jQuery中做一个"tab"系统。他做标签系统，我不得不在jQuery中做一个带有缩略图的图像滑块。我找到了一个名为"BXslider"的插件，它满足了我的需求，但我的朋友的jQuery代码有问题。

当我将其放在第一个选项卡中时，该插件可以工作，但是当我将其放在第三个选项卡中时，缩略图在那里，但大图像不存在。

这是我朋友打开标签的代码。

$(function() {
        $('#onglets').css('display', 'block');
        $('#onglets').click(function(event) {
            var actuel = event.target;
            if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
                return;
            }
            $(actuel).addClass('actif').siblings().removeClass('actif');
            setDisplay();
        });
        function setDisplay() {
            var modeAffichage;
            $('#onglets li').each(function(rang) {
                modeAffichage = $(this).hasClass('actif') ? '' : 'none';
                $('.item').eq(rang).css('display', modeAffichage);
            });
        }
        setDisplay();
    });

使用以下代码，当我在第三个选项卡上时，滑块不起作用：

    <div class="item">
    <?php include('./views/ContentAjax/description.php'); ?>
    </div>
    <div class="item">
    <?php include('./views/ContentAjax/tests.php'); ?>
    </div>
    <div class="item">
    <div id="game-content">
    <ul class="bxslider">
      <li><img  style="width : 200px;" src="./assets/img/assasins.png" ></li>
      <li><img  style="width : 200px;" src="./assets/img/gamerz.png" ></li>
      <li><img  style="width : 200px;" src="./assets/img/xbox.png" ></li>
    </ul>
    <div id="bx-pager">
      <a data-slide-index="0" href=""><img style="width : 100px;" src="./assets/img/assasins.png" /></a>
      <a data-slide-index="1" href=""><img style="width : 100px;" src="./assets/img/gamerz.png" /></a>
      <a data-slide-index="2" href=""><img style="width : 100px;" src="./assets/img/xbox.png" /></a>
    </div>
    <script>
    $('.bxslider').bxSlider({
      pagerCustom: '#bx-pager'
    })
    </script>
    </div>
    </div> <!-- Close <div class="item"> -->

使用以下代码，滑块位于第一个选项卡中，并且可以工作。

    <div class="item">
    <div id="game-content">
    <ul class="bxslider">
      <li><img  style="width : 200px;" src="./assets/img/assasins.png" ></li>
      <li><img  style="width : 200px;" src="./assets/img/gamerz.png" ></li>
      <li><img  style="width : 200px;" src="./assets/img/xbox.png" ></li>
    </ul>
    <div id="bx-pager">
      <a data-slide-index="0" href=""><img style="width : 100px;" src="./assets/img/assasins.png" /></a>
      <a data-slide-index="1" href=""><img style="width : 100px;" src="./assets/img/gamerz.png" /></a>
      <a data-slide-index="2" href=""><img style="width : 100px;" src="./assets/img/xbox.png" /></a>
    </div>
    <script>
    $('.bxslider').bxSlider({
      pagerCustom: '#bx-pager'
    })
    </script>
    </div>
    </div> <!-- Close <div class="item"> -->
    <div class="item">
    <?php include('./views/ContentAjax/description.php'); ?>
    </div>
    <div class="item">
    <?php include('./views/ContentAjax/tests.php'); ?>
    </div>

您知道如何解决此问题以及如何将滑块放在第一个选项卡以外的另一个选项卡中吗？问题是我使用此滑块（BXSlider）吗？

非常感谢您的帮助。