关注
分享
文章平均质量分 86
Swiper 是目前应用较广泛的移动端网页触摸内容滑动js插件。
github：https://github.com/JhouXu/swiper-exercize
俊小赞
自律使我自由。
展开
-
切换效果：other-translate 另类轮播图
other-translate 另类轮播图的实现。原创 2022-03-13 00:44:33 · 430 阅读 · 0 评论 -
Swiper 实现指定的 slide 显示位置
文章目录前言一、hashNavigation二、slideTo总结前言在日常的 Swiper.js 开发当中，我们难免需要实现：当某个按钮的点击，然后显示相对应的 slide 模块，类似分页器的。本文将会从Swiper的内置参数hashNavigation 与 slideTo() 方法，两种实现方式介绍。一、hashNavigation设置散列导航选项，或true使用默认值。为每个slide增加散列导航（有点像锚链接）。还需要在每个slide处增加data-hash属性。这样当你的sw原创 2021-03-22 17:14:31 · 6138 阅读 · 3 评论 -
切换效果：thumbs 缩略轮播图
文章目录前言一、最终效果二、代码复现总结前言swiper轮播图效果扩展二 —— thumbs缩略图。一、最终效果先来看一下我们的最终效果：二、代码复现有一次一个小坑就是，用 swiper4.5.1 居然会没有 swiper-slide-thumb-active类的添加，用早一些版本的又可以正常切换。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <m原创 2021-02-26 16:55:39 · 2655 阅读 · 0 评论 -
切换效果：coverflow 封面轮播图
文章目录前言一、最终效果二、swiper库的引入三、代码复现1. html主体2. css样式3. js脚本总结前言coverflow封面轮播图主要常用在一些音乐播放网站，或者视频网站中，主要是通过放大正在轮播的图片，从而实现捕获用户的眼球，减少其他未轮播到的轮播图视觉上的干扰，本文我们就通过 swiper库来简单实现一下。一、最终效果先来看一下我们的最终效果：二、swiper库的引入在 swiper中内置了四种轮播的样式，可设置为’slide’（普通切换、默认）,“fade”（淡入）原创 2021-02-26 12:13:05 · 1779 阅读 · 2 评论 -
在 Swiper 中使用 animate.css
文章目录前言一、是什么二、为什么三、Demo总结前言一、是什么二、为什么三、Demo<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>SwiperJS</title&g原创 2021-01-27 22:18:40 · 1731 阅读 · 2 评论 -
关于 SwiperJS 的初次使用
文章目录前言一、swiper二、初始化1.使用swiper文件或者cdn加载2.页面结构三、个性化1. direction：滑动方向2. speed：滑动时间3. autoHeight：高度自适应4. autoHeight：高度自适应总结前言如今，轮播图已经是每一个网站都会配备，其有着高效展现效率，本文将会介绍 Swiper 这个插件，讲解初始化步骤以及常见的参数。一、swiperSwiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。通过它可以快速地制作原创 2021-01-26 17:02:48 · 1566 阅读 · 0 评论