【问题标题】:swipe js custom widths滑动js自定义宽度
【发布时间】:2013-03-29 22:12:42
【问题描述】:

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

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>

【问题讨论】:

    标签: javascript jquery css jquery-mobile swipe


    【解决方案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%;    
    }
    

    【讨论】:

    • 耶!非常感谢,这正是我想要的:)
    猜你喜欢
    • 2013-12-07
    • 2015-07-14
    • 1970-01-01
    • 2016-09-03
    • 2016-01-28
    • 2017-09-28
    • 2012-06-29
    • 2018-06-13
    • 2017-09-19
    相关资源
    最近更新 更多