jquery,tab选项卡切换,左右滑动

问题遇到的现象和发生背景

点击到北京选项卡时点击右侧按钮li不显示

遇到的现象和发生背景，请写出第一个错误信息

在上海选项卡能够显示,在北京选项卡点击右侧li不显示

用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%

<div class="hotel-containner">
        <div class="box-section">
            <div class="left" style="display: none">
                <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.75 20.35c.3.25.8.25 1.05-.1.25-.3.25-.8-.1-1L7.1 12.2c-.1-.1-.1-.25-.05-.3l8.65-7.1c.3-.25.35-.75.1-1-.25-.3-.75-.35-1.05-.1l-8.8 7.2c-.65.6-.65 1.75.2 2.4l8.6 7.05z"
                          fill="#34475e" class="left_svg__transform-group"></path>
                </svg>
            </div>
            <div class="right">
                <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.825 20.61c-.303.297-.753.292-1.048-.16-.297-.303-.293-.753.16-1.049l8.47-6.966c.152-.149.153-.299.005-.45l-8.33-6.982c-.298-.304-.293-.754-.14-1.052.303-.297.753-.293 1.051-.14l8.479 7.135c.892.76.882 1.81-.026 2.55l-8.62 7.114z"
                          fill="#34475e" class="right_svg__transform-group"></path>
                </svg>
            </div>
            <ul class="section-hotel">
                <li class="item1"><a href="#">
                    <div class="img-box">
                        <img src="./img/img1.jpg" alt="">
                        <span class="img-ad">广告</span>
                    </div>
                    <div class="item-info">
                        <h3 class="img-name">上海瑞廷西郊S酒店</h3>
                        <img src="./img/xingxing.png" alt="" class="img-xing">
                        <div class="item-review">
                    <span>
                        <span class="review-score">4.7<em class="review-total">/5</em>
                        </span>
                        <span class="review-rating">超棒</span>
                    </span>
                        </div>
                        <div class="item-comment">
                            <div>2553条点评</div>
                            <div class="comment-price">
                                ¥
                                <span class="price-num">559</span>
                            </div>
                        </div>
                    </div>

                </a></li>
                <li class="item1"><a href="#">
                    <div class="img-box">
                        <img src="./img/img2.jpg" alt="">
                        <span class="img-ad">广告</span>
                    </div>
                    <div class="item-info">
                        <h3 class="img-name">上海古象杉丽酒店</h3>
                        <img src="./img/xingxing.png" alt="" class="img-xing">
                        <div class="item-review">
                    <span>
                        <span class="review-score">4.8<em class="review-total">/5</em>
                        </span>
                        <span class="review-rating">超棒</span>
                    </span>
                        </div>
                        <div class="item-comment">
                            <div>3851条点评</div>
                            <div class="comment-price">
                                ¥
                                <span class="price-num">831</span>
                            </div>
                        </div>
                    </div>

                </a></li>
                <li class="item1"><a href="#">
                    <div class="img-box">
                        <img src="./img/img3.jpg" alt="">
                        <span class="img-ad">广告</span>
                    </div>
                    <div class="item-info">
                        <h3 class="img-name">上海浦东机场博览中心丽呈睿轩酒店</h3>
                        <img src="./img/xingxing.png" alt="" class="img-xing">
                        <div class="item-review">
                    <span>
                        <span class="review-score">4.2<em class="review-total">/5</em>
                        </span>
                        <span class="review-rating">超棒</span>
                    </span>
                        </div>
                        <div class="item-comment">
                            <div>19条点评</div>
                            <div class="comment-price">
                                ¥
                                <span class="price-num">315</span>
                            </div>
                        </div>
                    </div>

                </a></li>
                <li class="item1" style="display: none"><a href="#">
                    <div class="img-box">
                        <img src="./img/ul1.5.jpg" alt="">
                        <span class="img-ad">广告</span>
                    </div>
                    <div class="item-info">
                        <h3 class="img-name">上海嘉定禧玥酒店</h3>
                        <img src="./img/xingxing.png" alt="" class="img-xing">
                        <div class="item-review">
                    <span>
                        <span class="review-score">4.8<em class="review-total">/5</em>
                        </span>
                        <span class="review-rating">超棒</span>
                    </span>
                        </div>
                        <div class="item-comment">
                            <div>736条点评</div>
                            <div class="comment-price">
                                ¥
                                <span class="price-num">783</span>
                            </div>
                        </div>
                    </div>

                </a></li>
                <li class="item1" style="display: none"><a href="#">
                    <div class="img-box">
                        <img src="./img/u1.4.jpg" alt="">
                        <span class="img-ad">广告</span>
                    </div>
                    <div class="item-info">
                        <h3 class="img-name">上海北虹桥绿地铂骊酒店</h3>
                        <img src="./img/xingxing.png" alt="" class="img-xing">
                        <div class="item-review">
                    <span>
                        <span class="review-score">4.6<em class="review-total">/5</em>
                        </span>
                        <span class="review-rating">超棒</span>
                    </span>
                        </div>
                        <div class="item-comment">
                            <div>1000条点评</div>
                            <div class="comment-price">
                                ¥
                                <span class="price-num">628</span>
                            </div>
                        </div>
                    </div>

                </a></li>
                <li class="item1" style="display: none"><a href="#">
                    <div class="img-box">
                        <img src="./img/ul1.6.jpg" alt="">
                        <span class="img-ad">广告</span>
                    </div>
                    <div class="item-info">
                        <h3 class="img-name">栖梦民宿(上海彩虹桥店)</h3>
                        <img src="./img/xingxing.png" alt="" class="img-xing">
                        <div class="item-review">
                    <span>
                        <span class="review-score">4.7<em class="review-total">/5</em>
                        </span>
                        <span class="review-rating">超棒</span>
                    </span>
                        </div>
                        <div class="item-comment">
                            <div>220条点评</div>
                            <div class="comment-price">
                                ¥
                                <span class="price-num">1360</span>
                            </div>
                        </div>
                    </div>

                </a></li>
            </ul>
            <ul class="section-hotel" style="display: none">
                <li class="item1"><a href="#">
                    <div class="img-box">
                        <img src="./img/ul2.1.jpg" alt="">
                        <span class="img-ad">广告</span>
                    </div>
                    <div class="item-info">
                        <h3 class="img-name">花筑奢·北京怀柔兰亭温泉度假酒店(慕田峪长城店)</h3>
                        <img src="./img/xingxing.png" alt="" class="img-xing">
                        <div class="item-review">
                    <span>
                        <span class="review-score">4.8<em class="review-total">/5</em>
                        </span>
                        <span class="review-rating">超棒</span>
                    </span>
                        </div>
                        <div class="item-comment">
                            <div>618条点评</div>
                            <div class="comment-price">
                                ¥
                                <span class="price-num">2649</span>
                            </div>
                        </div>
                    </div>

                </a></li>
                <li class="item1"><a href="#">
                    <div class="img-box">
                        <img src="./img/ul2.2.jpg" alt="">
                        <span class="img-ad">广告</span>
                    </div>
                    <div class="item-info">
                        <h3 class="img-name">北京丽泽商务区原拓酒店</h3>
                        <img src="./img/xingxing.png" alt="" class="img-xing">
                        <div class="item-review">
                    <span>
                        <span class="review-score">4.7<em class="review-total">/5</em>
                        </span>
                        <span class="review-rating">超棒</span>
                    </span>
                        </div>
                        <div class="item-comment">
                            <div>145条点评</div>
                            <div class="comment-price">
                                ¥
                                <span class="price-num">597</span>
                            </div>
                        </div>
                    </div>

                </a></li>
                <li class="item1"><a href="#">
                    <div class="img-box">
                        <img src="./img/ul2.3.jpg" alt="">
                        <span class="img-ad">广告</span>
                    </div>
                    <div class="item-info">
                        <h3 class="img-name">千子桐·初见酒店</h3>
                        <img src="./img/xingxing.png" alt="" class="img-xing">
                        <div class="item-review">
                    <span>
                        <span class="review-score">4.9<em class="review-total">/5</em>
                        </span>
                        <span class="review-rating">超棒</span>
                    </span>
                        </div>
                        <div class="item-comment">
                            <div>169条点评</div>
                            <div class="comment-price">
                                ¥
                                <span class="price-num">1199</span>
                            </div>
                        </div>
                    </div>

                </a></li>
                <li class="item1" style="display: none"><a href="#">
                   

                </a></li>
                <li class="item1" style="display: none"><a href="#">
                    
                </a></li>
                <li class="item1" style="display: none"><a href="#">
                  
                </a></li>
            </ul>
            <ul class="section-hotel" style="display: none">
                <li class="item1"><a href="#">
                  
                </a></li>
                <li class="item1"><a href="#">
                 
                </a></li>
                <li class="item1"><a href="#">
                   
                </a></li>
                <li class="item1" style="display: none"><a href="#">
                    <div class="img-box">
                     
                   
                </a></li>
                <li class="item1" style="display: none"><a href="#">
                  
                </a></li>
                <li class="item1" style="display: none"><a href="#">
                
                </a></li>
            </ul>
            <ul class="section-hotel" style="display: none">
                <li class="item1"><a href="#">                   
                </a></li>
                <li class="item1"><a href="#">                   
                </a></li>
                <li class="item1"><a href="#">                    
              
                </a></li>
                <li class="item1" style="display: none"><a href="#">
                 
                </a></li>
                <li class="item1" style="display: none"><a href="#">
               
                </a></li>
                <li class="item1" style="display: none"><a href="#">
                  

                </a></li>
            </ul>
        </div>
    </div>
</div>

//替换内容
    $(".btn1").click(function() {
        var index = $(this).index(); // 获取点击按钮的索引值

        $(".btn1").removeClass("btn1-active"); // 移除所有按钮的激活状态
        $(this).addClass("btn1-active"); // 添加当前按钮的激活状态

        $(".section-hotel").hide(); // 隐藏所有的 ul 元素
        $(".section-hotel").eq(index).show(); // 显示对应索引的 ul 元素
    });

    function initializeSlider() {
        var slider = $(".section-hotel");
        var sliderWidth = slider.width();
        var itemWidth = slider.find(".item1").outerWidth(true);
        var itemCount = slider.find(".item1").length;
        var visibleItems = Math.floor(sliderWidth / itemWidth);
        var currentIndex = 0;

        $(".right").on("click", function() {
            // 显示隐藏的 li 元素
            var hiddenItems = slider.find(".item1:hidden");
            if (hiddenItems.length > 0) {
                hiddenItems.slice(0, 3).show();
            }

            if (currentIndex >= itemCount - visibleItems) {
                currentIndex = 0;
            } else {
                currentIndex += 3;
            }

            var translateX = -currentIndex * itemWidth;
            slider.animate({ "margin-left": translateX + "px" }, 500);
            setTimeout(function() {
                $(".right").hide();
            }, 600);
            $(".left").show();
        });

        $(".left").on("click", function() {
            if (currentIndex <= 0) {
                currentIndex = itemCount - visibleItems;
            } else {
                currentIndex -= 3;
            }

            var translateX = -currentIndex * itemWidth;
            slider.animate({ "margin-left": translateX + "px" }, 500, function() {
                // 滑动完成后隐藏最后三个 li 元素
                var allItems = slider.find(".item1");
                var lastVisibleIndex = currentIndex + visibleItems;
                allItems.slice(lastVisibleIndex, lastVisibleIndex + 3).hide();
            });

            setTimeout(function() {
                $(".left").hide();
            }, 600);
            $(".right").show();
        });
    }

// 调用函数进行初始化
    initializeSlider();

运行结果及详细报错内容

我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%

尝试了一些方法,没有

使用浏览器的调试功能，看目标元素是被删除了还是没显示出来。

上海对应第一个ul,左右箭头运行正常,切换到北京点击右箭头运行不出来隐藏的li
,