swiper轮播_轮播居左展示

效果图

image.png

1.html
首先下载swiper，引用这些js和css

<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js.js" type="text/javascript" charset="utf-8"></script>

初始化swiper

<script type="text/javascript">
            $(document).ready(function () {
                var mySwiper = new Swiper('.swiper-container',{
                autoplay: {
                    delay: 4000, //每四秒切换一次
                    
                    disableOnInteraction: false //手动滑动后
                },
                loop: true,
                slidesPerView: 'auto', 
                spaceBetween : 16,
                centeredSlides: false, //图片不居中
                })
            });
        </script>

页面

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/swiper1.png" width="240px"/></div>
                <div class="swiper-slide"><img src="img/swiper2.png" width="240px"/></div>
                <div class="swiper-slide"><img src="img/swiper3.png" width="240px"/></div>
            </div>
        </div>

css样式修改

.swiper-wrapper{
    white-space: nowrap;
    width: 240px !important;
    position: relative;
    left: 16px;
}
.swiper-slide, .swiper-slide img{
    border-radius: 6px;
}