开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >Swiper 滚动插件

Swiper 滚动插件

作者头像

前Thoughtworks-杨焱

发布于 2021-12-08 01:35:51

发布于 2021-12-08 01:35:51

1.3K00

代码可运行

举报

文章被收录于专栏：杨焱的专栏杨焱的专栏

运行总次数：0

代码可运行

此插件用于设置内容滚动，支持手机，鼠标滚动，四方向滚动，支持滚动条样式，支持CSS3动画和DOM动画；

详细文档地址： http://www.idangero.us/sliders/swiper/api.php

var mySwiper = new Swiper('.swiper-container', {
    //scrollContainer:true,
    eventTarget: 'container',
    mousewheelControl: true,
    mousewheelControlForceToAxis: true,
    calculateHeight: true,
    //useCSS3Transforms:false,
    //DOMAnimation:true,
    mode: 'vertical',
    speed: 300, //Set animation duration to 500ms
    resizeReInit: true,
    visibilityFullFit: true,
    cssWidthAndHeight: true,
    freeModeFluid: true
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015-01-27，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

Swiper插件使用方法

javascript css api navigation size

Swiper插件的简单使用 Swiper插件是用来写轮播图的插件，十分简洁方便。可以直接去Swiper官网下载并点击开始使用Swiper按钮查看使用方法，这里只介绍简单引用的方法。本文所写内容在官网均有详细介绍。一、下载并引入文件可以直接登录官网下载，如果安装了Nodejs环境也可以打开编译器终端利用npm i swiper下载将文件放到你喜欢的路径，并分别引入css和js文件 <!DOCTYPE html> <html> <head> ... <link rel="styl

江一铭

2022/06/17

1.7K0

基于vue封装的pc端swiper组件

基于vue封装的pc端swiper组件话不多说，直接上代码 App.vue <template> <div> <div class="container"> <h2>Pc端轮播图</h2> <div v-if="imgList.length>0"> <Swiper :delay="delay" :duration="duration" :mode="mode"> <swiper-item v-for="(item,index) in

hss

2022/02/25

9550

Vue项目中使用npm i swiper插件踩坑记录

npm 插件队列事件数据

在一个 Vue 项目中使用的，npm 的 swiper 插件，遇到了一些坑，记录一下填坑过程。

德顺

2023/08/25

1.1K0

Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架，非常受到青睐，这里演示swiper在pc端全屏视觉轮播的效果，这也是pc端常用的一种特性

用户3159471

2018/09/13

3.6K0

Vue项目中使用npm i swiper插件踩坑记录

vue.js npm html5

1、使用静态数据时，一切正常， Swiper 可以正常滚动和滑动。但是使用动态数据时，会出现不能自动滚动/播放甚至数据显示不正常的现象。

德顺

2020/06/28

3.5K0

搞定这些疑难杂症，向css3动画说yes

本文篇幅比较长，涉及到的知识点也比较多，如3d，动画性能，动画js事件等，参考文献及demo展示也比较多，所以建议pc阅读效果更佳。动画库到现在来说css3动画也不是什么新技术，既然是要搞定它，好歹我们也得先看下别人做的一些东西吧，所以在此先向各位推荐几个比较好用的动画库： animate.css effeckt hover.css animatable 关于css3动画不得不说的几个属性看完上面那些动画库，心痒就不如行动了。说起css3动画，有一个属性我们绝对避不开了，那就是transform这个

IMWeb前端团队

2018/01/15

2.2K0

搞定这些疑难杂症，向css3动画说yes

Swiper如何快速上手？

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。

Javanx

2019/09/04

7900

开源 api jquery html 容器

swiper是一款轻量级以及免费的移动设备触控滑块的js框架，主要运用于移动端的操作，但也可以用于pc端页面效果制作，完全的开源免费，

用户3159471

2018/09/13

1.9K0

webAPP页面切换之滑动-swiper2(切换页面默认显示顶部)

最近做一个web页面，希望在手机上能滑动切换页面，第一次这种要求，在网上找到了一个插件swiper,swiper2可以在电脑和手机上使用，于是选择这个插件，在使用这个插件的过程也遇到了很多问题，如滚动条很长，体验不好，最后采用js来控制高度，在此页面中也采用了bootstrap-table插件来固定表头，采用js动态的设置高度，当页面高度小时，有滚动条，页面高时就完全展示，为了体验好，当滚动到第一个页面底部时，滑动切换第二个页面的顶部，需要scrollTop实现

tianyawhl

2019/04/04

2.4K0

轮播图swiper框架的基本使用

api jquery 网站

[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

坚毅的小解同志的前端社区

2022/11/28

1.4K0

轮播图swiper框架的基本使用

在vue中使用swiper

<template> <div class="main">  <div class="wrap"> <img class="bgImg" src="../../../../assets/images/fffbg.png" alt /> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(item,index)

用户4344670

2020/02/13

7050

swiper.animate实现轮播展示动画效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdn.bootc

明知山

2020/09/03

1.7K0

原 Swiper实现图片预览效果

作者：汪娇娇日期：2018年3月10日一、介绍先用几张图来和大家描述一下什么是图片预览效果吧。图一：图片列表；图二：点击列表中 “小猫” 这张图片，会弹出图二这样的预览图；图三：对图二向

jojo

2018/05/03

2.3K0

原 Swiper实现图片预览效果

基于swiper的手机端上下和左右滑动效果

上一篇文章中我向大家介绍了基于swiper的手机端上下和左右滑动效果，但有时候在上下滑动的中间需要有左右滑动的效果，那么我就再来给大家介绍一种基于swiper的手机端上下滑动的同时还能够左右滑动效果，来看一下代码。

OECOM

2020/07/01

3.6K0

vue项目简书(二)

https 网络安全编程算法渲染 vue.js

网址: https://github.com/semlinker/reactjs-interview-questions

生南星

2019/07/22

1.5K0

基于vue封装的移动端swiper组件

基于vue封装的移动端swiper组件直接上代码！ App.vue <template> <div> <div class="container"> <h2>移动端轮播图</h2> <div v-if="imgList.length>0"> <Swiper :delay="delay" :duration="duration" :moveRatio="moveRatio"> <swiper-item v-for="(item,ind

hss

2022/02/25

6650

get几个小技能：轮播图插件、进度条插件、筛选过滤插件

https javascript 网络安全 css jquery ui

最近参加了一个网页设计大赛，趁这个机会做了一个个人简历的网页：点击欣赏用到了许多有趣的东西们今天分享一下。

不愿意做鱼的小鲸鱼

2022/09/24

1.8K0

get几个小技能：轮播图插件、进度条插件、筛选过滤插件

Vue实现轮播效果

https 网络安全

文章转载自：Swiper中文网 [https://www.swiper.com.cn]

Li_XiaoJin

2022/06/10

1.1K0

AngularJS 中使用Swiper制作滚动图不能滑动

Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。 ---- 今天在使用Swiper的时候遇到这个问题：使用angularjs动态循环生成swiper-slide类，在swiper-wrapper里生成6个以上的滑动页，可是就是划不到第二页，尝试将longSwipesRatio的值修改到最小，仍然不起作用。 <div class="swiper-wrapper" >  <div cla

冷冷

2018/02/08

1.9K0

D3结合Swiper实现一个选中动画

最近接到一个项目，其中有一个小需求我觉得可以稍微沉淀一下，首先是d3.js的简单应用，还有就是swiper的调试费了一定的时间

玖柒的小窝

2021/11/02

8960

相关推荐

Swiper插件使用方法

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验