swiper实现左右滑动案例

最新推荐文章于 2024-06-07 10:59:17 发布
最新推荐文章于 2024-06-07 10:59:17 发布
阅读量9.2k 收藏
点赞数
分类专栏： 前端 js
前端 同时被 2 个专栏收录
76 篇文章 1 订阅
订阅专栏
js
54 篇文章 0 订阅
订阅专栏

1.html

<div class="historical similarity-degree">
    <div class="swiper-box">
        <div class="s-btn swiper-button-prev degree-prev"><span></span></div>
        <div class="s-btn swiper-button-next degree-next"><span></span></div>

        <div class="swiper-degree">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img build"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img municipal"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img highway"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img power"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                <tr>
                                    <th>投标单位：</th>
                                    <td>XXX建设投资有限公司</td>
                                </tr>
                                <tr>
                                    <th>总造价：</th>
                                    <td>3000万</td>
                                </tr>
                                <tr>
                                    <th>单方造价：</th>
                                    <td>300万/m2</td>
                                </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img electromechanical"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                <tr>
                                    <th>投标单位：</th>
                                    <td>XXX建设投资有限公司</td>
                                </tr>
                                <tr>
                                    <th>总造价：</th>
                                    <td>3000万</td>
                                </tr>
                                <tr>
                                    <th>单方造价：</th>
                                    <td>300万/m2</td>
                                </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img chemical"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img mine"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img communication"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img hydraulic"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img aviation"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img smelt"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img transit"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img forestry"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="s-b">
                        <a href="">
                            <h4>相似度90%</h4>

                            <div class="hd-img channel"></div>

                            <table cellpadding="0" cellspacing="0" border="0" class="ellipsis-table">
                                <tbody>
                                    <tr>
                                        <th>投标单位：</th>
                                        <td>XXX建设投资有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>总造价：</th>
                                        <td>3000万</td>
                                    </tr>
                                    <tr>
                                        <th>单方造价：</th>
                                        <td>300万/m2</td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2.css

.historical{margin-bottom:20px;padding-bottom:20px;}
.historical,.historical .swiper-slide{background-color:#fff;}
.historical h4{margin-bottom:10px;font-size:14px;color:#5a677e;}
.historical th{white-space:nowrap;font-weight:normal;color:#65737e;}
.historical td{color:#354052;}
.historical .n{font-weight:bold;color:#0fa4f6;}
.swiper-box{position:relative;padding:0 50px;}
.historical .swiper-container{overflow:hidden;margin:0 auto;}
.historical .swiper-slide{padding:0;border-top:0;}
.historical .swiper-wrapper{overflow:hidden;height:246px;/*margin:0 30px;*/}
.historical .swiper-slide .s-b{margin:0 10px;padding:15px 15px 15px 20px;border:1px solid #cad6e1;border-radius:6px;}
.historical .swiper-slide .s-b a{text-decoration:none;}
.historical .swiper-slide th,.historical .swiper-slide td{height:30px;text-align:left;}
.historical .swiper-slide th{text-align:right;}
.historical .swiper-slide td{text-indent:5px;}
.swiper-button-prev,.swiper-button-next,.swiper-box .s-btn span{position:absolute;z-index:1;top:0;width:30px;height:246px;background:#f6f8fa ;cursor:pointer;}
.swiper-button-prev:hover,.swiper-button-next:hover{background-color:#edf2f6;}
.swiper-box .s-btn span{width:10px;height:18px;top:50%;left:50%;margin-top:-9px;margin-left:-5px;background:url("../img/project/check-material.png") no-repeat 0 0;}
.swiper-button-prev{left:10px;}
.swiper-button-next{right:10px;}
.swiper-box .swiper-button-prev span{background-position:-700px 0;}
.swiper-box .swiper-button-prev:hover span{background-position:-720px 0;}
.swiper-box .swiper-button-next span{background-position:-740px 0;}

.swiper-box .swiper-button-next:hover span{background-position:-760px 0;}

.estimate .swiper-slide td{text-indent:10px;}
.estimate .hd-img,.similarity-degree .hd-img{width:68px;height:64px;margin:10px auto;background:url("../img/project/choose-bg.png") no-repeat 0 -250px;}
.estimate .swiper-wrapper,.estimate .swiper-button-prev,.estimate .swiper-button-next{height:296px;}
.estimate .build,.similarity-degree .build{background-position-x:0;}  /*建筑工程*/
.estimate .municipal,.similarity-degree .municipal{background-position-x:-76px;}  /*市政工程*/
.estimate .highway,.similarity-degree .highway{background-position-x:-153px;}   /*公路*/
.estimate .power,.similarity-degree .power{background-position-x:-222px;} /*电力*/
.estimate .electromechanical,.similarity-degree .electromechanical{background-position-x:-299px;} /*机电*/
.estimate .chemical,.similarity-degree .chemical{background-position-x:-371px;}  /*化工石油*/
.estimate .mine,.similarity-degree .mine{background-position-x:-445px;}  /*矿山*/
.estimate .communication,.similarity-degree .communication{background-position-x:-520px;background-position-y;-248px} /*通讯*/
.estimate .hydraulic,.similarity-degree .hydraulic{background-position-x:-596px;} /*水利水电*/
.estimate .aviation,.similarity-degree .aviation{background-position-x:-670px;}  /*航天航空*/
.estimate .smelt,.similarity-degree .smelt{background-position-x:-743px;} /*冶炼*/
.estimate .transit,.similarity-degree .transit{background-position-x:-821px;}   /*轨道交通*/
.estimate .forestry,.similarity-degree .forestry{background-position-x:-886px;}  /*农林*/
.estimate .channel,.similarity-degree .channel{background-position-x:-962px;}   /*港口与航道*/
.estimate .swiper-slide .s-b{transition:all 0.2s linear;}
.estimate .swiper-slide .s-b:hover{border-color:#0fa4f6;box-shadow:0 1px 11px #d8d8d8;}

3.js

<script src="../../resources/js/idangerous.swiper2.7.6.min.js"></script>

var mySwiperEstimate = new Swiper('.estimate .swiper-container',{
    createPagination: false,
    slidesPerView: 4
});
$('.estimate-prev').click(function(){
    mySwiperEstimate.swipePrev();
});

$('.estimate-next').click(function(){
    mySwiperEstimate.swipeNext();
});

低_调_哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0 使用 swiper 实现PC端卡片左右虚拟slides滑动
GotYoung的博客
08-11 3807
vue2.0 使用 swiper 实现PC端卡片左右虚拟slides滑动
swiper实现的滑块.zip
07-11
Swiper是一款强大的JavaScript滑动框架，常用于创建响应式的轮播图、...总的来说，使用Swiper实现轮播图滑块，不仅能够创建出功能强大且视觉效果出色的滑动组件，还能通过其丰富的配置和扩展，满足不同场景下的需求。
js+swiper实现视频上下滑动
weixin_45791806的博客
07-28 1237
代码】js+swiper实现视频上下滑动。
swiper 配置偏移
J_1999_0524的博客
06-07 377
【代码】swiper 配置偏移。
以makeblock为主题的滚动html案例(swiper实现界面滚动)
PG5的博客
05-31 147
【代码】以makeblock为主题的滚动html案例(swiper实现界面滚动)
swiper去除左右滑动设置（去除左右滑动切换）
Khun_HWJ的博客
03-31 5106
swiper去除滑动设置 有时候使用swiper并不想让它滑动，怎么设置呢？ 1.noSwiping设为true 2.在slide上（或其他元素）增加类名'swiper-no-swiping'，使该slide无法拖动。 案例： <div class="swiper-container"> <div class="swiper-wrapper"> ...
vue案例 - vue-awesome-swiper实现h5滑动翻页效果
weixin_33881050的博客
07-11 561
说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper？！ 中国有句古话叫：天塌下来有个高的顶着。 在前端圈里，总有前仆后继的仁人志士相继挥洒着热汗（这里没有血），在我们小白需要用到两个技术结合的时候，他们早已冲向前为我们杀出了一条路，准备好了实现用的技术和方案。有时候我就在想，我的理想大概就是站在自己现在仰望的代码塔的顶峰，像他们一样，不断...
小程序 swiper滑动 层叠滑动效果
Carina的编程技术博客
10-23 541
整个红色区域为可滑动区域，数字1区域为展示区域，数字2为下一个展示模块。
Swiper 实现 两行四列 轮播图
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
07-05 2607
案例效果 基本样式 .icons{ width:100%; overflow: hidden; } .icons-item{ width: 25%; height: 0; padding-bottom: 25%; float: left; } .icons-item img{ width: 1.1rem; height: 1.1rem; display: block; margin: 0 auto; padding-top: .2rem; } .icons-it
swiper.js实现3D界面滑动效果
ansheng02的博客
03-18 2299
官网地址：swiper中文网 swiper的使用很简单，需要引入两个文件， <link href="css/swiper.min.css" rel="stylesheet"> <script src="js/swiper.min.js"></script> <div class="container"> <div class=...
html swiper滑动,Swiper.js 移动触摸滑动插件使用教程
weixin_32427105的博客
06-10 326
最近在使用的一个移动触摸滑动插件Swiper，功能很强大，跟之前的那个swipe.js相比，同时支持在PC端滑动，支持上下方向滑动，支持多张图片滑动，支持多屏滑动，凡是你想得到的几乎都可以实现。最近作者还更新了3.0版本，优先支持IOS和最新版的Android移动端。下载代码可以在github上下载：https://github.com/nolimits4web/Swiper/或者有bower的，...
jQuery swiper水平左右滑动时间轴特效.zip
09-22
在本例中，“jQuery swiper水平左右滑动时间轴特效”展示了如何利用jQuery实现一个平滑的水平滑动时间轴，为用户提供一种流畅的浏览体验。这一特效适用于展示项目历程、新闻更新或者任何需要按时间顺序排列的内容。 ...
Swiper官网TFBOYS案例源码
05-27
此外，案例可能还涉及了Swiper的插件使用，如Parallax（视差滚动）和Scrollbar（滚动条）等，以实现更高级的交互。 通过研究这个源码，开发者不仅可以深入理解Swiper的工作原理，还能提升在实际项目中的应用能力。...
swiper手机端左右滑动天气预报特效代码
03-20
在本案例中，“swiper手机端左右滑动天气预报特效代码”是指利用 Swiper 库创建了一个手机应用或网页组件，用于展示实时天气预报，并且用户可以通过左右滑动手势来浏览不同地点的天气信息。 Swiper 的核心特性包括...
开关电源中，穿越频率的大致选择范围
08-05
在开关电源设计之中，穿越频率是一个相当重要的指标。在文中从就开关电源设计中的环路反馈控制方法、环路增益作 用进行了阐述。并在此基础上就穿越频率选取的限制条件进行分析，为开关电源设计中的穿越频率选取提供借鉴。 穿越频率 ；开关电源设计 ；选取方法 ；限制条件 开关电源设计过程中，环路反馈控制回路的的性能决定了电 源的精度和整体性能，因此设计一个优良的环路控制回路对开发 一个开关电源系统至关重要。其中穿越频率的选取又是反馈回路 设计中的关键因数。
销售员各月销售提成计算.xlsx.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
营销数据看板-多样式分析销售数.xlsx.xlsx
最新发布
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
swiper实现无缝滚动
10-13
要实现swiper的无缝滚动，可以通过在swiper的外层包裹一层容器，并在容器的两端各复制一份swiper的内容，然后在swiper的初始化配置中设置loop为true，这样swiper就可以无限循环滚动了。 具体实现步骤如下： 1. 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值