修改swiper的Navigation前后切换按钮和Pagination样式，把组件放到容器外面,修改swiper的默认箭头样式

swiper基本都是在容器内部展示，ui设计要求放在外面，找了很多demo都没放在外面，要不就是放在容器外部不显示，结合其他的贴子最终实现了

实现效果

修改方法

在swiper容器外面包一层div：设置样式： position: relative;padding: 0

 在swiper容器设置样式 

--swiper-navigation-size: 0;

position: initial;

设置Pagination和Navigation的自定义样式 （自定义需要修改样式 不然页面上不显示）

.swiper-horizontal>.swiper-pagination-bullets,

                .swiper-pagination-bullets.swiper-pagination-horizontal {

                    text-align: left;

                }

                .swiper-pagination-bullet {

                    height: 10px;

                    width: 10px;

                }

                .swiper-pagination1 {

                    margin-top: 50px;

                }

                .swiper-button-next1,

                .swiper-button-prev1 {

                    width: 50px;

                    height: 50px;

                    border-radius: 50%;

                    border: 1px solid #656565;

                    display: flex;

                    justify-content: center;

                    align-items: center;

                    bottom: 0;

                    right: 0;

                    .el-icon-back,

                    .el-icon-right {

                        font-size: 25px;

                    }

                }

                .swiper-button-next1 {

                    position: absolute;

                }

                .swiper-button-prev1 {

                    position: absolute;

                    bottom: 0;

                    right: calc(1vw + 50px);

                }