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 
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    swiper實現左右滑動案例
      
                1.html<div class="historical similarity-degree">
    <div class="swiper-box">
        <div class="s-btn swiper-button-prev  

  
 

    

    
    vue2.0引用vue-awesome-swiper外掛實現左右滑動輪播效果
      
                

首先需要下載依賴npm install vue-awesome-swiper --save
同時引入css樣式
<link rel="stylesheet"  href="/static/css/swiper.min.css" charset="utf-8"> 

  
 

    

    
    Android Fragment+Viewpager實現左右滑動和點選 實現DrawerLayout
       
  
  
 xml佈局程式碼: 
 <android.support.v4.widget.DrawerLayout xmlns:android=“http://schemas.android.com/apk/res/android” xmlns:app=“http://schemas.androi 

  
 

    

    
    仿淘寶、京東、美團使用ViewPager+GridView實現左右滑動檢視更多分類導航功能
       
 
  
  
   文章說明  本文修改自開發者原始碼  微信公共號：China-dvlp 
 如果你有想學習的文章直接關注公眾號(開發者原始碼)回覆，我會整理徵稿。如果你有好的文章想和大家分享歡迎投稿，直接向我回覆文章連結即可。 
  
    概 述 
  
 仿淘寶、京東、美團使用ViewPage 

  
 

    

    
    Android中Fragment+Viewpager實現左右滑動和點選
      
							
							
							一.佈局檔案
<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    andr 

  
 

    

    
    純JS實現左右滑動佈局和滑動
      
                <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=keywords content=首頁>
    <meta name 

  
 

    

    
    android 使用ViewFlow實現左右滑動
      


是的，你沒看錯，是ViewFlow，不是ViewPager，也不是ViewFlipper。ViewFlow是一個開源的androidUI庫。它提供了三個元件ViewFlow、FlowIndicator和TitleFlowIndicator。它使得由Adapter產生的ViewGroup中的View可以水 

  
 

    

    
    Swiper禁用左右滑動時空隙
      
								
								            
						
                
<script>
jQuery(document).on("pageshow",function(){new Swiper('.swiper-container', {       pag 

  
 

    

    
    iOS使用UIScrollView實現左右滑動UITableView和UICollectionView
      
                
在UIScrollView中巢狀UITableView的文章很多，但是專案需要，需要巢狀UICollectionView，而UICollectionView和UITableView有很多不同，有些知識到現在也沒搞清楚，一遍一遍的嘗試，總算是做出來了。以下是實現後的效果圖：
 

  
 

    

    
    swiper實現觸控滑動
      
                
引入需要的檔案       
        <link href="css/swiper.min.css" rel="stylesheet" type="text/css">
        <script type="text/javascript"  

  
 

    

    
    js實現左右滑動的導航選單，仿今日頭條頂部選單
      
								
								            
						
                
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <t 

  
 

    

    
    html實現左右滑動選單
      
							
							
							ps:最近在寫一個公眾號專案時遇到需要動態生成選單可滑動，在之前的android開發中實現通過v7包中提供的元件即可完成。那麼，在網頁的開發中需要如何實現這個功能呢？！，這裡通過swiper.js來實現可滑動選單。 
http://www.swiper.com. 

  
 

    

    
    viewPager + recycleView 實現左右滑動
      
                

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:ori 

  
 

    

    
    BottomNavigationView + ViewPager + Fragment 實現左右滑動和下方導航欄
      
							
							
							轉載請註明出處：http://blog.csdn.net/htwhtw123/article/details/78441431 
比較簡單的用BottomNavigationView 、 ViewPager 、 Fragment 實現下方導航欄與上方可翻頁頁面， 

  
 

    

    
    自定義HorizontalScrollView實現左右滑動介面
      
                public class TimeLimitPurchaseScrollView extends HorizontalScrollView implements
      OnClickListener
{

   /**
    * 圖片滾動時的回撥介面
    *
   

  
 

    

    
    使用HorizontalListView，實現左右滑動時，有箭頭提示，到達端點時，箭頭消失。
      
                
最近做專案，用到水平ListView，對於此，網上已經有很多人寫過了，比較有名的就是HorizontalListView.java。但是如果要實現箭頭的提示（哪邊可滑動，即有箭頭提示往哪邊可滑動）的功能，則無法實現。而且在網上也沒有找到相關的功能，於是，菜鳥嘗試自己動手寫一 

  
 

    

    
    Android 5.x新增控制元件之--TabLayout實現左右滑動導航選單
      
                
1.效果圖(用來和Viewpager結合使用來作為Viewpager的選項卡。)

2.使用方式
builde.gride檔案中新增下面的依賴，compile'com.android.support:design:22.2.0'//可修改版本號為對應的buildToolsV 

  
 

    

    
    Android：使用ViewPager實現左右滑動切換圖片 (簡單版)
      
                

ViewPager，它是google SDk中自帶的一個附加包的一個類， 可以使檢視滑動。



步驟：

1、引入android-support-v4.jar包，在主佈局里加入

<android.support.v4.view.ViewPager
android 

  
 

    

    
    Bootstrap 輪播圖Carousel 實現左右滑動手勢
      
                前言

bootstrap的carousel輪播圖只有兩側的邊可以進行點選並進行上一頁下一頁，但是這個輪播圖放在手機頁面H5裡就很需要手勢左右滑動。我查了下網上都是引一些別的類庫，並不是最好的方法。

程式碼

其實bootstrap有提供左右切換的方法，但是沒有監聽手勢滑動 

  
 

    

    
    【android】ViewPager的使用——實現左右滑動（下方帶圓點）
      
							
							
							
  官方解釋： 
  ViewPager is most often used in conjunction with Fragment, which is a convenient way to supply and manage the lifecycle