Swiper组件（三）-- 组配置（网格布局设置）

神农尺

于 2021-01-21 17:26:39 发布

阅读量6.2k

点赞数 1

分类专栏： Swiper

本文链接：https://blog.youkuaiyun.com/qq_42855675/article/details/112850049

版权

Swiper 专栏收录该内容

10 篇文章

订阅专栏

文章目录

slidesPerView
centeredSlides
centeredSlidesBounds
slidesPerGroup
slidesPerGroupSkip
spaceBetween
slidesPerColumn
slidesPerColumnFill
slidesOffsetBefore
slidesOffsetAfter
centerInsufficientSlides
代码

slidesPerView

(1)设置slider容器能够同时显示的slides数量。
(2)可选值:number/‘auto’ – 注意：auto必须在引号之内。
(3)默认值：1
(4)注意：动态变换该属性时可以从’auto’–>number ，也可以从’number’ – >‘number’。但是无法从’number’–>‘auto’（原因未知）
在这里插入图片描述

centeredSlides

（1）默认情况下active slide会靠在左边，设置该属性为true时，active slide会居中
（2）默认值：false
在这里插入图片描述

centeredSlidesBounds

(1)当设置了Active Slide居中后，还可以配合设置此参数，使得第一个和最后一个Slide 始终贴合边缘。
(2)默认值:false
在这里插入图片描述

slidesPerGroup

（1）定义slides的数量多少为一组进行滑过
（2）默认值：1

slidesPerGroupSkip

（1）在设置了slidesPerGroup的基础上，设置跳过分组。设置的前几个slide将不计入分组之内。
（2）默认值：0

spaceBetween

（1）在slide之间设置距离（单位px）
（2）默认值：0
在这里插入图片描述

slidesPerColumn

（1）设置多行布局里面每列的slide数量。
（2）该属性需要在swiper-slide上设置height的高度来配合使用才能有效。
（3）如果slidesPerColumn初始话时的值为1，那么后面动态更改时会出现slide没有换行的问题（原因未知）
（3）注：slidesPerColumn目前还不兼容loop模式（loop: true）。
在这里插入图片描述

slidesPerColumnFill

多行布局中以什么形式填充：
|  ‘column’（列）  |   ‘row’（行）  |
|  1 3 5                  |  1 2 3             |
|  2 4 6                  |  4 5 6             |

slidesOffsetBefore

（1）设定slide与左边框的预设偏移量（单位px）
（2）默认值：0
在这里插入图片描述

slidesOffsetAfter

（1）设定slide与右边框的预设偏移量（单位px）
（2）注：slidesPerColumn != 1时，该属性无效（原因未知）
在这里插入图片描述

centerInsufficientSlides

（1）开启这个参数，当slides的总数小于slidesPerView时，slides居中。
（2）不适用于loop模式和slidesPerColumn
在这里插入图片描述

代码

        .swiper-container {
            width: 600px;
            height: 300px;
            text-align: center;
        }
        
        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #mySwiper4 .swiper-slide-active {
            background: #ff6600;
            color: #fff;
        }
        
        .swiper-box {
            width: 600px;
            text-align: center;
            margin: 30px;
        }
        
        .button-box {
            display: flex;
            justify-content: space-around;
        }
        
        .button {
            height: 50px;
            line-height: 50px;
            border-radius: 5px;
            text-align: center;
            padding: 0px 10px;
            margin-top: 20px;
            background: rgba(6, 6, 6, 0.2);
            color: #666;
            cursor: pointer;
        }
        
        .button:hover {
            transform: scale(1.1);
        }
        
        .button-active {
            background: rgba(255, 0, 0, 0.2);
            color: #f00;
        }
        
        .height33 {
            height: 33%;
        }
        
        .height50 {
            height: 50%;
        }
    </style>

<body style="display:flex;justify-content:space-around;flex-wrap: wrap;">
    <div class="swiper-box">
        <div class="swiper-container" id="mySwiper4">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="button-box">
            <div onclick="centeredSlides()" class="button" id="centeredSlides">centeredSlides--居中设置
            </div>
            <div onclick="removeCenteredSlides()" class="button  button-active" id="removeCenteredSlides">
                centeredSlides--取消设置</div>
        </div>
        <div class="button-box">
            <div onclick="centeredSlidesBounds()" class="button" id="SlidesBounds">centeredSlides--设置顶边</div>
            <div onclick="removeCenteredSlidesBounds()" class="button button-active" id="removeSlidesBounds">
                centeredSlides--取消顶边</div>
        </div>
    </div>
    <div class="swiper-box">
        <div class="swiper-container" id="mySwiper5">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="width:20%;background-color: #f00;">width:20%</div>
                <div class="swiper-slide" style="width:20%;background-color: #ff0;">width:20%</div>
                <div class="swiper-slide" style="width:30%;background-color: #f0f;">width:30%</div>
                <div class="swiper-slide" style="width:40%;background-color: #fff;">width:40%</div>
                <div class="swiper-slide" style="width:50%;background-color: #00f;">width:50%</div>
                <div class="swiper-slide" style="width:60%;background-color: #0f0;">width:60%</div>
                <div class="swiper-slide" style="width:70%;background-color: #0ff;">width:70%</div>
                <div class="swiper-slide" style="width:80%;background-color: #aaa;">width:80%</div>
                <div class="swiper-slide" style="width:90%;background-color: #0aa;">width:90%</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="button-box">
            <div onclick="slidesPerView(this,3)" class="button">slidesPerView:3
            </div>
            <!-- <div οnclick="slidesPerViewAuto()" class="button  button-active" id="slidesPerViewAuto">
                slidesPerView:auto</div> -->
        </div>
        <div class="button-box">
            <div class="button button-active" id="centeredSlides">slidesOffsetAfter:100</div>
        </div>
        <div class="button-box">
            <div onclick="slidesPerGroup1()" class="button  button-active" id="slidesPerGroup1">slidesPerGroup:1
            </div>
            <div onclick="slidesPerGroup3()" class="button" id="slidesPerGroup3">
                slidesPerGroup:3</div>
        </div>
        <div class="button-box">
            <div onclick="slidesPerGroupSkip()" class="button  button-active" id="slidesPerGroupSkip">
                slidesPerGroupSkip:0
            </div>
            <div onclick="slidesPerGroupSkip3()" class="button" id="slidesPerGroupSkip3">
                slidesPerGroupSkip:3</div>
        </div>
        <div class="button-box">
            <div onclick="spaceBetween()" class="button  button-active" id="spaceBetween">spaceBetween:0
            </div>
            <div onclick="spaceBetween20()" class="button" id="spaceBetween20">
                spaceBetween:20</div>
        </div>
    </div>
    <div class="swiper-box">
        <div class="swiper-container" id="mySwiper6">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="height:50%;background-color: #f00;">slide 1</div>
                <div class="swiper-slide" style="height:50%;background-color: #ff0;">slide 2</div>
                <div class="swiper-slide" style="height:50%;background-color: #f0f;">slide 3</div>
                <div class="swiper-slide" style="height:50%;background-color: #fff;">slide 4</div>
                <div class="swiper-slide" style="height:50%;background-color: #00f;">slide 5</div>
                <div class="swiper-slide" style="height:50%;background-color: #0f0;">slide 6</div>
                <div class="swiper-slide" style="height:50%;background-color: #0ff;">slide 7</div>
                <div class="swiper-slide" style="height:50%;background-color: #aaa;">slide 8</div>
                <div class="swiper-slide" style="height:50%;background-color: #0aa;">slide 9</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="button-box">
            <div class="button button-active" id="centeredSlides">slidesOffsetBefore:100</div>
        </div>
        <div class="button-box">
            <div onclick="slidesPerView(this,1)" class="button">slidesPerView:1</div>
            <div onclick="slidesPerView(this,2)" class="button">slidesPerView:2</div>
            <div onclick="slidesPerView(this,3)" class="button button-active">slidesPerView:3</div>
        </div>
        <div class="button-box">
            <div onclick="slidesPerColumn(this,1)" class="button" id="centeredSlides">slidesPerColumn:1</div>
            <div onclick="slidesPerColumn(this,2)" class="button  button-active" id="centeredSlides">slidesPerColumn:2</div>
            <div onclick="slidesPerColumn(this,3)" class="button" id="removeCenteredSlides">slidesPerColumn:3</div>
        </div>
    </div>
    <div class="swiper-box">
        <div class="swiper-container" id="mySwiper7">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-color: #f00;">slide 1</div>
                <div class="swiper-slide" style="background-color: #ff0;">slide 2</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="button-box">
            <div class="button button-active" id="centeredSlides">centerInsufficientSlides:true</div>
            <div class="button button-active" id="centeredSlides">slidesPerView:5</div>
        </div>
    </div>
    <script rel="stylesheet" src="../js/swiper.min.js"></script>
    <script src="../js/jquery-1.10.2.min.js"></script>
    <script src="../js/swiper4.js"></script>
</body>

let mySwiper4 = new Swiper('#mySwiper4', {
    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 3,
    centeredSlides: false,
});
let mySwiper5 = new Swiper('#mySwiper5', {
    initialSlide: 8,
    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 'auto',
    slidesPerGroup: 1,
    slidesPerGroupSkip: 0,
    spaceBetween: 0,
    slidesOffsetAfter: 100,
});
let mySwiper6 = new Swiper('#mySwiper6', {
    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 3,
    slidesPerColumn: 2, //如果默认值是1的话，后面动态更改时会出现问题,并且该值要配合swiper-slide的height属性一起更改才能有效
    slidesPerColumnFill: 'row',
    slidesOffsetBefore: 100,
    slidesOffsetAfter: 100, //无效
});
let mySwiper7 = new Swiper('#mySwiper7', {
    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 5,
    centerInsufficientSlides: true,
});

function changeActive(id1, id2) {
    if (!$(id1).hasClass("button-active")) {
        $(id1).addClass("button-active");
        $(id2).removeClass("button-active");
    }
}

function centeredSlides() {
    changeActive("#centeredSlides", "#removeCenteredSlides");
    mySwiper4.params.centeredSlides = true;
    mySwiper4.update();
}

function removeCenteredSlides() {
    changeActive("#removeCenteredSlides", "#centeredSlides");
    $("#removeSlidesBounds").addClass("button-active");
    $("#SlidesBounds").removeClass("button-active");
    mySwiper4.params.centeredSlides = false;
    mySwiper4.params.centeredSlidesBounds = false;
    mySwiper4.update();
}

function centeredSlidesBounds() {
    if (!$("#centeredSlides").hasClass("button-active")) {
        alert("未选择centeredSlides，无法选择该选项")
    } else {
        changeActive("#SlidesBounds", "#removeSlidesBounds");
        mySwiper4.params.centeredSlidesBounds = true;
        mySwiper4.update();
    }
}

function removeCenteredSlidesBounds() {
    changeActive("#removeSlidesBounds", "#SlidesBounds");
    mySwiper4.params.centeredSlidesBounds = false;
    mySwiper4.update();
}

function slidesPerView(_this, num) {
    let id = $(_this).parent().parent().children('.swiper-container').attr("id");
    if (id == "mySwiper5") {
        // changeActive("#slidesPerView", "#slidesPerViewAuto");
        $(_this).addClass('button-active');
        mySwiper5.params.slidesPerView = num;
        mySwiper5.update();
    } else if (id == "mySwiper6") {
        $(_this).parent().children().removeClass('button-active');
        $(_this).addClass('button-active');
        mySwiper6.params.slidesPerView = num;
        mySwiper6.update();
    }

}

function slidesPerViewAuto() {
    changeActive("#slidesPerViewAuto", "#slidesPerView");
    mySwiper5.params.slidesPerView = "'auto'";
    mySwiper5.update();
}

function slidesPerGroup1() {
    changeActive("#slidesPerGroup1", "#slidesPerGroup3");
    $("#slidesPerGroupSkip").addClass("button-active");
    $("#slidesPerGroupSkip3").removeClass("button-active");
    mySwiper5.params.slidesPerGroup = 1;
    mySwiper5.update();
}

function slidesPerGroup3() {
    changeActive("#slidesPerGroup3", "#slidesPerGroup1");
    mySwiper5.params.slidesPerGroup = 3;
    mySwiper5.update();
}

function slidesPerGroupSkip() {
    changeActive("#slidesPerGroupSkip", "#slidesPerGroupSkip3");
    mySwiper5.params.slidesPerGroupSkip = 0;
    mySwiper5.update();
}

function slidesPerGroupSkip3() {
    if (!$("#slidesPerGroup3").hasClass("button-active")) {
        alert("未选择slidesPerGroup:3，无法选择该选项")
    } else {
        changeActive("#slidesPerGroupSkip3", "#slidesPerGroupSkip");
        mySwiper5.params.slidesPerGroupSkip = 3;
        mySwiper5.update();
    }
}

function spaceBetween() {
    changeActive("#spaceBetween", "#spaceBetween20");
    mySwiper5.params.spaceBetween = 0;
    mySwiper5.update();
}

function spaceBetween20() {
    changeActive("#spaceBetween20", "#spaceBetween");
    mySwiper5.params.spaceBetween = 20;
    mySwiper5.update();
}

function slidesPerColumn(_this, num) {
    let height = (100 / num) + '%';
    $(_this).parent().parent().children(".swiper-container").children(".swiper-wrapper").children().css("height", height);
    $(_this).parent().children().removeClass('button-active');
    $(_this).addClass('button-active');
    mySwiper6.params.slidesPerColumn = num;
    mySwiper6.update();
}