01swiper之居中两边留边

作者: pzmpzm | 来源:发表于2018-08-02 10:02 被阅读0次

01swiper之居中两边留边
分页居中，两边圆角
css 常见布局
网页固定宽度居中两边留等距（淘宝样式）
transform设置banner自适应居中裁剪
H5页面适配问题小记
如何选择良辰吉日？倒计时！
图片居中-高度固定-左右两边裁剪
两边
两边

效果图：

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.css">

    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }
        
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        
        .swiper-slide {
            width: 300px;
            height: 400px;
        }
        
        .swiper-slide img {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container  " style="height: auto;overflow: visible;">
        <div class="swiper-wrapper swiper-wrapper1" style="transform: translate3d(-2586.5px, 0px, 0px); transition-duration: 0ms;">
            <div class="swiper-slide " style="margin-right: 28px;"><img src="http://j.vzan.cc/content/171017/images/zhibo.png" alt=""></div>
            <div class="swiper-slide " style="margin-right: 28px;"><img src="http://j.vzan.cc/content/171017/images/tongcheng.png" alt=""></div>
            <div class="swiper-slide " style="margin-right: 28px;"><img src="http://j.vzan.cc/content/171017/images/shequ.png" alt=""></div>
            <div class="swiper-slide " style="margin-right: 28px;"><img src="http://j.vzan.cc/content/171017/images/xiaocx.png" alt=""></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {

            slidesPerView: 'auto', //重要 可以去swiper搜索
            centeredSlides: true,   //重要
            paginationClickable: true,
            spaceBetween: 28,
            effect: 'left',
            loop: true
        });
    </script>
</body>

</html>