swiper实现左右滑动案例
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(); });