实现滑动效果

标签：size   rip   app   font   isa   ali   ide   back   jin   

html

<!-- 工作环境 -->
<div class="environment">
    <div class="environment-title">
        工作在xx
    </div>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <img  class="swiper-slide" src="/Index/Index/image/join/huanjing.png">
            <img  class="swiper-slide" src="/Index/Index/image/join/huanjing.png">
            <img  class="swiper-slide" src="/Index/Index/image/join/huanjing.png">
            <img  class="swiper-slide" src="/Index/Index/image/join/huanjing.png">
        </div>
    </div>
</div>

css

.environment {
    height: 650px;
    background-color: #F6F8FC;
    .environment-title {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        padding-top: 80px;
    }

    .swiper-container {
        margin-top: 60px;
        //border: 1px solid red;
        .swiper-slide {
            width: 840px;
            height: 360px;
        }
    }
}

js

var swiper = new Swiper('.swiper-container', {
    slidesPerView: "auto",
    autoHeight:true,
    spaceBetween: 50,
    freeMode: true,
    // autoplay: {
    //     delay: 2500,
    //     disableOnInteraction: false,
    // },
    // loop: true
});

引入swiper

<link rel="stylesheet" href="/plugin/swiper/swiper.min.css" />
<script src="/plugin/swiper/swiper.min.js"></script>

布局的时候，就要结合一些插件来实现最终效果！
这里的slidesPerView要设置成自动“auto”，否则宽高不好控制。

实现滑动效果

标签：size   rip   app   font   isa   ali   ide   back   jin   

原文地址：https://www.cnblogs.com/jiqing9006/p/12163267.html