轮播图

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../public/img/lunbotu1.png"> </div>
        <div class="swiper-slide"><img src="../public/img/22AD918C4ACB480882D3F6D92501.jpg"></div>

    </div>    <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
    <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->

</div>

<script>
    var mySwiper = new Swiper('.swiper-container', {   navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: true,//可选选项，自动滑动
    })
</script>


以及css

.swiper-slide{
    display: flex;
margin:0px auto
}

.swiper-container{
    width:1200px;
}