<!--{* banner *}-->
<div class="swiper banner-swiper">
    <div class="swiper-wrapper">
        @foreach (inject('ad')->ad(1) as $key => $value)
        <div class="swiper-slide"><img src="{{ $value->img }}" alt="{!! $value['title'] !!}"></div>
        @endforeach
    </div>

    <!-- 左侧：上一张 -->
    <div class="swiper-side swiper-prev">
        <span class="arrow">←</span>
        <span class="num">
            <em class="prev-num">1</em>/<em class="total-num">6</em>
        </span>
    </div>

    <!-- 右侧：下一张 -->
    <div class="swiper-side swiper-next">
        <span class="num">
            <em class="next-num">2</em>/<em class="total-num">6</em>
        </span>
        <span class="arrow">→</span>
    </div>
</div>

<style>
.banner-swiper {
    position: relative;
    width: 100%;
}

.banner-swiper img {
    width: 100%;
    display: block;
}

/* 左右控制区 */
.swiper-side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 110px;
    height: 56px;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    user-select: none;
}

.swiper-prev {
    left: 0;
}

.swiper-next {
    right: 0;
}

.swiper-side .arrow {
    font-size: 18px;
    margin: 0 6px;
}

.swiper-side .num em {
    font-style: normal;
}

</style>



<script>
    var swiper = new Swiper(".banner-swiper", {
        loop: true,
        speed: 800,

        navigation: {
            prevEl: ".swiper-prev",
            nextEl: ".swiper-next"
        },

        on: {
            init: function () {
                updateSideNumber(this);
            },
            slideChange: function () {
                updateSideNumber(this);
            }
        }
    });

    function updateSideNumber(swiper) {
        // 实际 slide 数（去掉 loop 克隆）
        var total = swiper.slides.length - swiper.loopedSlides * 2;

        // 当前真实索引（0 开始）
        var current = swiper.realIndex;

        // 上一张
        var prev = current - 1 < 0 ? total - 1 : current - 1;

        // 下一张
        var next = current + 1 >= total ? 0 : current + 1;

        document.querySelector(".prev-num").innerText = prev + 1;
        document.querySelector(".next-num").innerText = next + 1;

        document.querySelectorAll(".total-num").forEach(function (el) {
            el.innerText = total;
        });
    }

</script>