swiper-居中属性

我不是女神ヾ 2022-09-23 04:00 57阅读 0赞

这一节主要介绍swiper当中的居中属性。  
   
这个居中是指将我们浏览的当前页面进行居中显示，当我们使用分组显示的时候效果比较明显。  
首先还是要按照第一节的内容完成一个基础的swiper页面。

<div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">第一页</div>
                    <div class="swiper-slide">第二页</div>
                    <div class="swiper-slide">第三页</div>
                    <div class="swiper-slide">第四页</div>
                    <div class="swiper-slide">第五页</div>
                    <div class="swiper-slide">第六页</div>
                    <div class="swiper-slide">第七页</div>
                    <div class="swiper-slide">第八页</div>
                    <div class="swiper-slide">第九页</div>
                    <div class="swiper-slide">第十页</div>
                    <div class="swiper-slide">第十一页</div>
                    <div class="swiper-slide">第十二页</div>
                    <div class="swiper-slide">第十三页</div>
                </div>
            </div>

然后进行页面的初始化，为了使效果更加明显，我们将页面加上分组显示和页面间隙，在测试的过程当中我们也可以将分组显示删除或者注释，来观看页面效果。

<script>
                var swipre = new Swiper('.swiper-container',{
                    slidesPerView:4,   //分组显示
                    spaceBetween:30    //页面间隙
                    centeredSlides:true  //页面居中
                });
            </script>

这样就将页面居中的属性添加到了我们的项目当中

发表评论取消回复

表情：

评论列表（有 0 条评论，57人围观）

还没有评论，来说两句吧...

相关阅读

相关 swiper默认选中,swiper组件

\ swiper组件 swiper是一个\\滑块视图容器\\。即: \\轮播图\\组件或者\\焦点图\\组件。swiper这个组件封装的已经比较完善，使用起来非常方便。 \

野性酷女/ 2023年01月17日 08:21/ 0 赞/ 375 阅读

相关【小程序-轮播图】微信小程序-swiper swiper-item 标签及常见属性

demo.wxml <!-- 1 轮播图的外层容器 swiper 2 每一个轮播项 swiper-item 3 swiper 标签存在默认样式

拼搏现实的明天。/ 2022年10月12日 01:20/ 0 赞/ 221 阅读

相关 swiper

<template>  <!-- <div class="title">切换效果-effect</div> --

阳光穿透心脏的1/2处/ 2022年10月07日 11:49/ 0 赞/ 201 阅读

相关 Swiper-当中的swiper嵌套

这节课我们介绍swiper当中的swiper嵌套。这次第一步有些不一样，虽然同样是要搭建swiper页面，但是我们在一个swiper页面当中的slide里面嵌套了

小咪咪/ 2022年09月23日 04:00/ 0 赞/ 516 阅读

相关 swiper-居中属性

这一节主要介绍swiper当中的居中属性。这个居中是指将我们浏览的当前页面进行居中显示，当我们使用分组显示的时候效果比较明显。首先还是要按照第一节的内容完成

我不是女神ヾ/ 2022年09月23日 04:00/ 0 赞/ 57 阅读

相关 Vue使用轮播图vue-awesome-swiper组件常用属性-swiper案例

[vue-awesome-swiper][] ![20210816180708815.gif][] 安装 npm install vue-awesome-

我会带着你远行/ 2022年09月05日 01:57/ 0 赞/ 396 阅读

相关 Swiper、vue-awesome-swiper中文文档

[中文文档][Link 1] 找了好久才找到，适用于vue-awesome-swiper滑动组件 swiperOption: { heig

悠悠/ 2022年05月14日 02:56/ 0 赞/ 4741 阅读

相关 Swiper练习

闲来无事，写了几个轮播的dome，都是公司UI设计的，写好，方便之后复制粘贴:-) 效果图: ![70][] ![70 1][] ![70 2][] 好吧，这个

た入场券/ 2022年05月10日 09:18/ 0 赞/ 229 阅读

相关 swiper

第一步安装 npm install swiper //这个是在别的情况下载的文件 npm install vue-awesome-swiper --sav

朴灿烈づ我的快乐病毒、/ 2022年01月23日 01:25/ 0 赞/ 297 阅读

相关 HTML CSS 背景图居中属性background-position

HTML CSS背景图居中（无序列表） ![箭头背景图右对齐][20200902225512172.png_pic_center] --背景重复：

绝地灬酷狼/ 2021年07月26日 00:40/ 0 赞/ 815 阅读