swiper插件的使用_swiper-bundle_X_starer的博客-程序员宝宝

技术标签: 大数据  

简介

swiper是一款开源的解决前端开发中触摸滑动案例的插件。常用于移动端网站的内容触摸滑动,能实现轮播图、触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

下载

swiper官网 -->获取swiper-->下载swiper

使用方法

1.首先加载插件,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件,不同Swiper版本用到的文件名略有不同。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
</body>
</html>

2.添加HTML内容。Swiper7的默认容器是'.swiper',Swiper6之前是'.swiper-container'。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在Swiper容器之外

3.你可能想要给Swiper定义一个大小,当然不要也行。

.swiper {
    width: 600px;
    height: 300px;
}  

4.初始化Swiper。


<script>        
  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/X_starer/article/details/125528418

智能推荐

小程序-笔记1_weixin_33743661的博客-程序员宝宝

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

gopro7怎么回看视频_gopro7推荐帧数设置 gopro7视频格式设置_锦瑞妈妈的博客-程序员宝宝

gopro7的出现让人很多运动爱好者欣喜,因为gopro可以随时捕捉并记录自己在运动场飒爽而又矫健的身姿。但是有了gopro7并不一定能拍摄出好的照片和视频,得要会用才行。接下来的内容中小编主要介绍gopro7推荐帧数设置、gopro7视频格式设置等,希望大家可以使用gopro7拍摄出令自己满意的作品。一、gopro7推荐帧数设置一般的拍摄的参数可以设置成2.7K60P或者1080120P,但是如...

Y05 - 017、猜小埋年龄游戏_会飞还得了的博客-程序员宝宝

初学耗时:0.5h注:CSDN手机端暂不支持章节内链跳转,但外链可用,更好体验还请上电脑端。一、  1.1   1.2 记忆词:  ... Y05 - 999、Python - 风变编程 ギ 舒适区ゾ || ♂ 累觉无爱 ♀ 一、  1.1 ~&nbsp;  1.2 ~&nbsp;    1.2.1 . &nbsp;    1.2.2 . &n...

AndroidStudio卡在building “project name”gradle project info_哆啦A梦z的博客-程序员宝宝

遇到从github上面check下来的项目或者接手别人的项目的时候,经常会遇到这么情况只需两步操作如图: 即:F:\JGW_Android\SuperCodePDA\gradle\wrapper\gradle-wrapper.properties 1、找到你创建成功过的项目的该文件里面的版本配置 2、替换当前项目的该文件的配置一句话:(不管怎么样,先进去再说) 另外:如

pyhton/Perl设置 sublime text2_weixin_30889885的博客-程序员宝宝

Python程序员的 Sublime Text 2 配置为什么 按了ctrl+b。弹出的框 没东西显示呀。。thanks因为你用了中文路径。最好不要用非 ascii 字符路径,尤其在 windows 下,python 对此很敏感。Sublime Text 对中文支持不好,请不要把源文件放在带有中文的路径中...

ThoughtWorks(中国)程序员读书雷达_kakakaluolita的博客-程序员宝宝

软件业的特点是变化。若要提高软件开发的技能,就必须跟上技术发展的步伐。埋首醉心于项目开发与实战,固然能够锤炼自己的开发技巧,却难免受限于经验与学识。世界上并不存在速成的终南捷径,但阅读好的技术书籍,尤其是阅读大师们的经典著作,总能收到事半功倍之效。一位优秀的程序员,或许就是一名好的阅读者。好的阅读者,总是知道如何选择好的书籍。书海浩繁,良...

随便推点

iNode客户端“未收到服务器回应,即将强行下线,请检查终端能否正常访问网络或者与管理员联系”问题与解决方式..._普通网友的博客-程序员宝宝

最后在华工校园网用户故障自助手册中找到答案,参考链接:https://max.book118.com/html/2015/0115/11423952.shtmhttps://wenku.baidu.com/view/b4308a4ab42acfc789eb172ded630b1c58ee9b10.html?re=view(google真的比baidu好用太多)...

官方IT行业分类方案(图)_topinking的博客-程序员宝宝

http://article.zhaopin.com/pub/view.jsp?id=86584官方IT行业分类方案(图)   来源:网络  日期: 2007-09-26   方案分成“IT主体职业”、“IT应用职业”、“IT相关职业”三个小类,在小类下分别分出“软件类”等13个职业群,41个职业(细类)。其中IT主体职业是指那些只与IT职业技能相关的“纯粹”的IT类职业;IT应用职业是...

存在时更新 不存在时新增:merge into using(071问题)_skybeque的博客-程序员宝宝

merge into using在写数据同步的脚本时,常常会遇到这样的需求:存在时 -&gt; 更新,不存在时 -&gt; 插入。-- 源表 aCREATE TABLE a( id NUMBER(3), name VARCHAR2(30), sex VARCHAR2(2));INSERT INTO a(ID, NAME, sex) VALUES(1, '小游子', '女');INSERT INTO a(ID, NAME, sex) VALUES(2, '小优子', '男'

数字孪生示范项目——从单摆谈起(1)_Htreys的博客-程序员宝宝

谈到数字孪生,相信大家都不感到陌生,举几个离我们很近的例子吧:当你戴上一个特殊手套,弯曲手指或者攥紧拳头时,一只机械臂也会跟你做出相同的动作。还有当今特别火热的元宇宙,我们构造出来的虚拟人,能够仿照我们讲话、做手势等等。 而我最近在做的项目,其背后逻辑也是数字孪生,也就是make sense digital twins.数字孪生项目1 先放个视频在这里看一下我要做的单摆大致是个什么东西,大致能达到什么效果。我所做的与之相似,我是利用物理中的单摆,在单摆上绑上一个传感器,用于抓捕数据来获取单摆目前所在位置

简要概述synchronized底层原理_jiahuixi的博客-程序员宝宝

深入理解synchronized底层原理synchronized与可见性JMM关于synchronized的两条语义规定了:线程加锁前:需要将工作内存清空,从而保证了工作区的变量副本都是从主存中获取的最新值。 线程解锁前;需要将工作内存的变量副本写回到主存中。大概流程:清空线程的工作内存-&gt;在主存中拷贝变量副本到工作内存-&gt;执行完毕-&gt;将变量副本写回到主存中-&gt;释放锁。所以synchronized能保证共享变量的可见性,而实现这个流程的原理也是通过插入内存屏.

认知篇---嵌入式工程师的未来发展前景怎么样_ST小智的博客-程序员宝宝_嵌入式软件工程师前景

1、天下难事,必做于易;在这里我们可以学习常用的控件初始化方法,设计快速学习各类控件的使用方法,本次课程的目的是为了了解Qt控件类型及使用方法。2、在Qt中最常见就是按键,有了按键可以产生响应事件,达到人机交互的效果。3、QPushButton:下压按钮 QToolButton:工具按钮 QRadioButton:选择按钮 ...

推荐文章

热门文章

相关标签