1

使用移动设备的 swipe js,我不知道如何显示两个 div 而不是一个。

现场样品在这里

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>
4

1 回答 1

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%;    
}
于 2013-03-29T22:28:57.903 回答