使用 swiper 制作 导航,点击项居中
目的:导航有多个,被点击的项居中显示。
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 制作 导航,点击项居中的更多相关文章
- 微信小程序 使用swiper制作一个滑动导航
最近在做一个导航的时候,发现使用overflow-x: auto来做多内容滑动导航效果很不好,思索是不是可以使用swiper来做一个,研究了下其实发现原理基本相同 这里说下,要用swiper做导航菜单 ...
- 【CSS3】---练习制作导航菜单
练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...
- css3制作导航栏
<!doctype html><html lang="en"><head> <meta charset="UTF-8&qu ...
- C3制作导航栏分割线及立体风格
//首先写一个导航栏样式 .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; ...
- 移动端如何用swiper实现导航栏效果
在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...
- 微信小程序swiper制作内容高度不定的tab选项卡
微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...
- CSS3背景 制作导航菜单综合练习题
CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...
- list点击项高亮其他默认
// 点击项颜色高亮,其他默认 if (position != lastPosition && onClickItemView != null) { TabMenu lastTabMe ...
- C/S模式开发中如何利用WebBrowser控件制作导航窗体
原文:C/S模式开发中如何利用WebBrowser控件制作导航窗体 转自: CSDN 相信不少同学们都做过MIS系统的开发,今天这里不讨论B/S模式开发的问题.来谈谈winform开发.用过市面上常见 ...
随机推荐
- Visual Studio Code快捷键大全
原文链接:https://segmentfault.com/a/1190000007688656 常用 General 按 Press 功能 Function Ctrl + Shift + P,F1 ...
- 代码反向生成数据库注释更新sql
原理 通过反射实体所在程序集,得到枚举值列表,再通过sql获取数据库表结构,两者拼接成sql. 规范 实体枚举字段最好也加上Description特性,方便多次更新: 代码 实体定义 public p ...
- spring(四):DI流程
在IoC容器初始化过程中,一般不包含Bean依赖注入的实现. 依赖注入一般发生在应用第一次向容器获取Bean时(getBean),但是有一个例外. 在使用IoC容器时有一个预实例化的配置,即通过laz ...
- keil密钥过期 新注册机 有效期至2032年
点击下载:keil注册机至2032年
- Mybaits(11)延迟加载
一.概述 1.概念 就是在需要用到数据时才去进行加载,不需要用的数据就不加载数据.延迟加载也称为懒加载. 2.优缺点 优点:先从单表查询,需要时再从关联表去关联查询,大大提高数据库性能,因为查询单表要 ...
- 矩阵快速幂+二分 poj3233
#include <iostream> #include <cstdio> #include <string> #include <cstring> # ...
- 19年7月份面试7家公司,整理的java面试题(答案自行百度解决,也是个学习的过程)
Dubbo与注册中心Zookeeper了解多少ConcurrentHashMap的原理 集合 HashMap 和 HashTable和ConcurrentHashMap的原理以及区别HashMap初始 ...
- NOIP做题练习(day1)
A - Xenny and Alternating Tasks 题面 题解 枚举第一天是谁做,将两个答案取\(min\)即可. 代码 #include <iostream> #includ ...
- 2.17NOIP模拟赛(by hzwer) T2 小奇的序列
[题目背景] 小奇总是在数学课上思考奇怪的问题. [问题描述] 给定一个长度为 n 的数列,以及 m 次询问,每次给出三个数 l,r 和 P, 询问 (a[l'] + a[l'+1] + ... + ...
- 【C语言】数组名作函数参数,完成数据的升序排列
#include<stdio.h> void sort(int x[],int n); int main() { ] = { ,,,,,,,,, },i; sort(arr, ); pri ...