vue-awesome-swiper缩略图centeredSlides false

### 配置 `vue-awesome-swiper` 插件以设置缩略图模式下的 `centeredSlides`

为了在 `vue-awesome-swiper` 中配置缩略图模式并将 `centeredSlides` 属性设为 `false`，可以在初始化 Swiper 组件时调整对应的参数。具体来说，在定义缩略图的选项对象中指定此属性。

export default {
  data() {
    return {
      swiperOptionThumbs: {
        spaceBetween: 10,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        centeredSlides: false // 设置为中心对齐关闭状态[^2]
      }
    };
  },
};

通过上述代码片段可以观察到，当创建用于管理缩略图行为的数据结构时，已将 `centeredSlides` 明确设定成布尔值 `false`。这会使得缩略图不再居中显示而是按照顺序排列。

此外，还需确保顶部轮播图与底部缩略图之间的交互逻辑正常工作。为此可在组件挂载完成后获取两个不同部分实例并建立关联：

mounted() {
  const swiperTop = this.$refs.swiperTop.$el.swiper;
  const swiperThumbs = this.$refs.swiperThumbs.$el.swiper;

  swiperTop.controller.control = swiperThumbs;
  swiperThumbs.controller.control = swiperTop;
}

这段脚本实现了让主展示区和辅助导航栏之间形成同步切换的效果[^3]。值得注意的是，即使更改了 `centeredSlides` 参数，只要保持正确的控制器连接关系，则不会影响两者的协调运作。