2013-03-29 74 views
1

使用移動設備的swipe js,我無法弄清楚如何顯示兩個div而不是一個div。swipe js自定義寬度

Live Sample here

CSS

body { 
    font-family: arial; 
} 
.swipe { 
    overflow: hidden; 
    visibility: hidden; 
    position: relative; 
} 
.swipe-wrap { 
    overflow: hidden; 
    position: relative; 
} 
.swipe-wrap > div { 
    font-size: 90px; 
    font-weight: bold; 
    float:left; 
    width: 100%; 
    position: relative; 
} 

HTML

<div id='mySwipe' class='swipe'> 
    <div class='swipe-wrap'> 
    <div>0</div> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
    <div>10</div> 
    <div>11</div> 
    <div>12</div> 
    <div>13</div> 
    <div>14</div> 
    </div> 
</div> 


<div> 
    <button class='prev' onclick='mySwipe.prev()'>prev</button> 
    <button class='next' onclick='mySwipe.next()'>next</button> 
</div> 

回答

3

簡單,你欺騙是這樣的:http://jsfiddle.net/Gajotres/tFFAt/

HTML變化:

<div id="projects"> 
    <div id='mySwipe' class='swipe'> 
     <div class='swipe-wrap'> 
      <div> 
      <div>0</div> 
      <div>1</div>    
      </div> 
      <div> 
      <div>2</div> 
      <div>3</div>   
      </div> 
      <div> 
      <div>4</div> 
      <div>5</div>    
      </div> 
      <div> 
      <div>6</div> 
      <div>7</div>    
      </div> 
      <div> 
      <div>8</div> 
      <div>9</div>    
      </div> 
      <div> 
      <div>10</div> 
      <div>11</div>   
      </div>   
      <div> 
      <div>12</div> 
      <div>13</div>  
      </div> 
      <div> 
      <div>14</div>   
      </div> 
     </div> 
    </div> 

CSS變化:

.swipe-wrap div div { 
    display: inline-block; 
    width: 48%;  
} 
+1

耶!非常感謝這正是我一直在尋找的:) – Rob