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

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. Visual Studio Code快捷键大全

    原文链接:https://segmentfault.com/a/1190000007688656 常用 General 按 Press 功能 Function Ctrl + Shift + P,F1 ...

  2. 代码反向生成数据库注释更新sql

    原理 通过反射实体所在程序集,得到枚举值列表,再通过sql获取数据库表结构,两者拼接成sql. 规范 实体枚举字段最好也加上Description特性,方便多次更新: 代码 实体定义 public p ...

  3. spring(四):DI流程

    在IoC容器初始化过程中,一般不包含Bean依赖注入的实现. 依赖注入一般发生在应用第一次向容器获取Bean时(getBean),但是有一个例外. 在使用IoC容器时有一个预实例化的配置,即通过laz ...

  4. keil密钥过期 新注册机 有效期至2032年

    点击下载:keil注册机至2032年

  5. Mybaits(11)延迟加载

    一.概述 1.概念 就是在需要用到数据时才去进行加载,不需要用的数据就不加载数据.延迟加载也称为懒加载. 2.优缺点 优点:先从单表查询,需要时再从关联表去关联查询,大大提高数据库性能,因为查询单表要 ...

  6. 矩阵快速幂+二分 poj3233

    #include <iostream> #include <cstdio> #include <string> #include <cstring> # ...

  7. 19年7月份面试7家公司,整理的java面试题(答案自行百度解决,也是个学习的过程)

    Dubbo与注册中心Zookeeper了解多少ConcurrentHashMap的原理 集合 HashMap 和 HashTable和ConcurrentHashMap的原理以及区别HashMap初始 ...

  8. NOIP做题练习(day1)

    A - Xenny and Alternating Tasks 题面 题解 枚举第一天是谁做,将两个答案取\(min\)即可. 代码 #include <iostream> #includ ...

  9. 2.17NOIP模拟赛(by hzwer) T2 小奇的序列

    [题目背景] 小奇总是在数学课上思考奇怪的问题. [问题描述] 给定一个长度为 n 的数列,以及 m 次询问,每次给出三个数 l,r 和 P, 询问 (a[l'] + a[l'+1] + ... + ...

  10. 【C语言】数组名作函数参数,完成数据的升序排列

    #include<stdio.h> void sort(int x[],int n); int main() { ] = { ,,,,,,,,, },i; sort(arr, ); pri ...