swiper6引入左右按钮和分页器

轮播图操作过程：

1引包

import Swiper from 'swiper';

2引入样式

import 'swiper/swiper-bundle.css';

3结构

4new Swpier实例

var mySwiper = new Swiper('.swiper-container',{
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

结果是：轮播图不能左右点击，但是可以长按左右滑动，分页器也没有

参考很多文章，主要解决通过

vue使用swiper6分页器踩坑

解决方法：

在第六版导入只能导入swiper核心内容，而部分组件效果如分页器需要单独导入

引入下面的即可：

import Swiper, { Pagination, Navigation } from 'swiper'
Swiper.use([Pagination, Navigation])