大佬帮个忙看一下，第一张会变成最后一张，并且消失了

风信

<div class="swiper-container shi">
        <div class="swiper-wrapper ul">
            <div class="swiper-slide li">
                <p>快捷支付</p>
                <p>扫码、付款、收款轻松完成</p>
            </div>
            <div class="swiper-slide li">
                <p>发现优惠</p>
                <p>权益、优惠一手掌握</p>
            </div>
            <div class="swiper-slide li">
                <p>卡片管理</p>
                <p>还款、记录、查账一次搞定</p>
            </div>
            <div class="swiper-slide li">
                <p>新人福利</p>
                <p>注册就送大额礼包、专属福利</p>
                <p><a href="#">立即体验</a></p>
            </div>
        </div>
        <ol class="swiper-pagination">
        </ol>
    </div>

风信

这个是写好的js，套用基本格式之后第一张就变成了最后一张，而且内容都消失了，最后一张的最后一个p标签的文字也没了，求大佬们解救
$(document).ready(function () {
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        
        // 如果需要分页器
        pagination: '.swiper-pagination',
        
    })      
})