Question

使用移动设备的滑动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>

Answer 1

很简单，你这样作弊：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%;    
}

滑动js自定义宽度

1 个答案: