swiper pagination从左到右高度增高

### 使用 Swiper 插件实现 Pagination 高度渐变效果

为了实现在 Swiper 中 pagination 项从左到右高度逐渐增加的效果，可以通过自定义 CSS 和 JavaScript 来调整每个分页器项目的样式。具体方法如下：

#### 自定义分页器渲染函数
通过 `renderBullet` 参数来自定义分页器的 HTML 结构，并为其分配唯一的类名以便后续操作。

const swiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet(index, className) {
            return `<span class="${className} custom-bullet-${index + 1}"></span>`;
        }
    },
});

#### 添加 CSS 动态设置高度
利用上述生成的独特类名为各个分页按钮设定不同的高度值。这里采用线性增长的方式使右侧元素高于左侧元素。

.swiper-pagination .custom-bullet-1 { height: 8px; } /* 基础高度 */
.swiper-pagination .custom-bullet-2 { height: 10px; }
.swiper-pagination .custom-bullet-3 { height: 12px; }
/* 继续按照需求添加更多规则... */

对于更灵活的变化模式，比如指数型或其他非线性的变化规律，则可以在初始化时计算所需的高度并通过内联样式应用给每一个 bullet 元素[^3]。

#### 利用JavaScript动态控制
如果希望更加精确地控制每一页对应bullet 的尺寸变化趋势，还可以借助于 Swiper 提供的各种事件钩子，在运行期间实时修改 DOM 节点属性。

swiper.on('slideChangeTransitionEnd', function () {
    const activeIndex = this.activeIndex;
    document.querySelectorAll('.swiper-pagination span').forEach((el, idx) => {
        let ratio = (idx / (this.slides.length - 1)) * 100;
        el.style.height = `${Math.min(20, Math.abs(activeIndex - idx) * 4 + 8)}px`;
    });
});

这段脚本会在每次切换幻灯片结束之后重新评估并更新所有分页指示符的高度，从而形成一种视觉上的“聚焦”效应——当前选中的页面对应的分页器会显得更大一些。