水平滑动组件 Flipsnap

1. Download and load

Download code here. And load script like below.

flipsnap.js is not dependent other library.

2. Write HTML

HTML set up outer element and inner element. in this case, outer element is .viewport, inner element is .flipsnap

    

        
1
        
2
        
3
    

3. Write CSS

Write CSS like below.

.viewport {
    width: 320px;
    overflow: hidden;
    margin: 0 auto;
    -webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}

.flipsnap {
    width: 960px; /* 320px(item width) * 3(item count) */
}

.flipsnap:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.item {
    float: left;
    width: 310px;
    font-size: 50px;
    text-align: center;
    padding: 50px 0;
    background: #EFEFEF;
    border: 5px solid #999;
    color: #666;
}

• .viewport set overflow:hidden and real view width.
• .flipsnap set additional all item width.
• .item is made into one row using float. Probably, it or flexbox may be used(if supported browser).

4. Write JavaScript

Call Flipsnap() with CSS selector of inner element. in this case, it is .flipsnap

Flipsnap('.flipsnap');

JavaScript code is only one line! You can set options and bind event. see also document and demo.

5. Complete!