目的:导航有多个,被点击的项居中显示。

html:

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
<div class="swiper-slide">slider4</div>
<div class="swiper-slide">slider5</div>
<div class="swiper-slide">slider6</div>
<div class="swiper-slide">slider7</div>
<div class="swiper-slide">slider8</div>
<div class="swiper-slide">slider9</div>
</div>
</div>

js:

var mySwiper = new Swiper('.swiper-container', {
//autoplay: true, //可选选项,自动滑动
loop:true,//设置 active slide 居中后,会有左右留白现象,添加此会让未尾的导航补齐前后空白
slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide。
slidesPerView: 5,
centeredSlides: true,//设定为true时,active slide会居中,而不是默认状态下的居左。
spaceBetween: 10,
slidesOffsetBefore: 0,
slidesOffsetAfter: 0,
}) $('.swiper-container .swiper-slide').on("click",function(){
//mySwiper.activeIndex 过渡到的 slide 位置
mySwiper.slideTo(mySwiper.activeIndex, 1000, false);//切换到指定slide,速度为1秒 })

样式并未做修改,此时仅实现如下图效果,active 项始终会在中间显示

因时间问题,没更多时间云看文档,如果有更好的办法可以去除当前项居中后的左右留白问题,欢迎评论指正。

使用 swiper 制作 导航,点击项居中的更多相关文章

  1. 微信小程序 使用swiper制作一个滑动导航

    最近在做一个导航的时候,发现使用overflow-x: auto来做多内容滑动导航效果很不好,思索是不是可以使用swiper来做一个,研究了下其实发现原理基本相同 这里说下,要用swiper做导航菜单 ...

  2. 【CSS3】---练习制作导航菜单

    练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...

  3. css3制作导航栏

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. C3制作导航栏分割线及立体风格

    //首先写一个导航栏样式 .nav{    width:560px;    height: 50px;    font:bold 0/50px Arial;    text-align:center; ...

  5. 移动端如何用swiper实现导航栏效果

    在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...

  6. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

  7. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  8. list点击项高亮其他默认

    // 点击项颜色高亮,其他默认 if (position != lastPosition && onClickItemView != null) { TabMenu lastTabMe ...

  9. C/S模式开发中如何利用WebBrowser控件制作导航窗体

    原文:C/S模式开发中如何利用WebBrowser控件制作导航窗体 转自: CSDN 相信不少同学们都做过MIS系统的开发,今天这里不讨论B/S模式开发的问题.来谈谈winform开发.用过市面上常见 ...

随机推荐

  1. input输入框在ios手机上获取焦点后有一个灰色阴影

    遇到的场景: 有一个输入框 设置 outline:none 然后我又想给他设置获取焦点的颜色 然后 我给input 设置 border 为 1px t透明的 然后 获取焦点的时候 重新设置border ...

  2. ignoreContentAdaptWithSize

    使用cocosStudio 中 的Text控件时,要设定text.ignoreContentAdaptWithSize(true); 设定控件(0.5,0.5)锚点位置不随文本长度变化而变化.

  3. 生产环境实践:Cana实现MySQL到ES实时同步

    注:由于文章篇幅有限,完整文档可扫下面二维码免费获取,更有深受好评的大数据实战精英+架构师好课等着你. 速点链接加入高手战队:http://www.dajiangtai.com/course/112. ...

  4. 三值的排序 Sorting a Three-Valued Sequence(洛谷 P1459USACO2.1,IOI96Day2)

    Sorting a Three-Valued Sequence IOI'96 - Day 2 Sorting is one of the most frequently performed compu ...

  5. Django_模型字段属性

    """ 定义属性 概述 ·django根据属性的类型确定以下信息 ·当前选择的数据库支持字段的类型 ·渲染管理表单时使用的默认html控件 ·在管理站点最低限度的验证 · ...

  6. chrome headless+selenium+python+(ubuntu 16.04/centos7) 下的实现

    Ubuntu 16.04 下: 0x01 安装chrome 1 下载源加入系统源列表 sudo wget http://www.linuxidc.com/files/repo/google-chrom ...

  7. Jquery判断单个checkbox 是否被选中

    jquery判断checked的三种方法: .attr("checked") .prop("checked") .is(":checked" ...

  8. redis架构

    hash槽16384个,0-16383 master1(slave101,slave102)     master2  (slave201,slave202)    master 3 (slave30 ...

  9. 很多win10系统用户都遇见了开机发现任务管理器中有个系统中断进程占用cpu99%的问题,

    很多win10系统用户都遇见了开机发现任务管理器中有个系统中断进程占用cpu99%的问题,尝试了网上提供的方法都不能得到有效的解决.下面小编就为大家详细的介绍电脑工程师提供的正确的解决姿势. 出现系统 ...

  10. 09day 命令提示符优化及yum优化

    export PS1='\[\e[32;1m\][\u@\h \W]\$ \[\e[0m\]' 设置颜色 内容 结束 export PS1='\[\e[30;1m\][\u@\h \W]\$ \[\e ...