Tmall Like flipsnap effect.

flipslider.css

.zebra-fushi-slider {
    position: relative;
    height: 11.09333333em;
    background: url(//img.alicdn.com/tps/i3/TB1dTp0IpXXXXbcXFXXt1Aj_XXX-1125-780.jpg) top left no-repeat;
    background-size: 100%;
}

.zebra-fushi-slider .viewport {
    width: 16em;
    overflow: hidden;
    height: 11.09333333em;
    margin: 0 auto;
    padding: 0;
    -webkit-transform: translateZ(0)
}

.zebra-fushi-slider .flipsnap {
    width: 1980px;
    padding-left: 4em
}

.zebra-fushi-slider .flipsnap:after {
    content: '';
    display: inline-block;
    clear: both;
    height: 0
}

.zebra-fushi-slider .item {
    width: 8em;
    height: 11.09333333em;
    margin: 0;
    float: left
}

.zebra-fushi-slider .item a {
    display: block;
    position: relative;
    width: 7.68em;
    height: 10.24em;
    margin: .42666667em auto
}

.zebra-fushi-slider .item a .slide-img {
    position: absolute;
    width: 100%;
    bottom: 0;
    border: 0;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    transition: all .5s ease-in
}

.zebra-fushi-slider .item a .mask {
    opacity: .4;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    background-color: #fff
}

.zebra-fushi-slider .item:not(.slide-item-current) a img.slide-img {
    bottom: 0;
    width: 80%;
    opacity: .7
}

.zebra-fushi-slider .item:not(.slide-item-current) a .mask {
    display: block;
    bottom: 0;
    width: 80%;
    height: 80%;
    opacity: .4
}

.zebra-fushi-slider .item.slide-item-pre a img.slide-img {
    right: 10px
}

.zebra-fushi-slider .item.slide-item-pre a .mask {
    right: 10px
}

.zebra-fushi-slider .item.slide-item-next a img.slide-img {
    left: 10px
}

.zebra-fushi-slider .item.slide-item-next a .mask {
    left: 10px
}

@media screen and (min-width: 320px) {
    .zebra-fushi-slider {
        font-size:20px
    }
}

@media screen and (min-width: 360px) {
    .zebra-fushi-slider {
        font-size:22.5px
    }
}

@media screen and (min-width: 375px) {
    .zebra-fushi-slider {
        font-size:23.4375px
    }
}

@media screen and (min-width: 384px) {
    .zebra-fushi-slider {
        font-size:24px
    }
}

@media screen and (min-width: 414px) {
    .zebra-fushi-slider {
        font-size:25.857px
    }
}

index.html

<link rel="stylesheet" href="/app/static/flipslider.css">

<div class="zebra-fushi-slider">
  <div class="viewport" id="slider-show">
    <div class="flipsnap slide-wrapper">
      <div class="item slide-item"><a href=""><img src="/app/static/img/t1.jpg" alt="" class="slide-img"></a></div>
      <div class="item slide-item"><a href=""><img src="/app/static/img/t2.jpg" alt="" class="slide-img"></a></div>
      <div class="item slide-item"><a href=""><img src="/app/static/img/t3.jpg" alt="" class="slide-img"></a></div>
      <div class="item slide-item"><a href=""><img src="/app/static/img/t4.jpg" alt="" class="slide-img"></a></div>
      <div class="item slide-item"><a href=""><img src="/app/static/img/t5.jpg" alt="" class="slide-img"></a></div>
      <div class="item slide-item"><a href=""><img src="/app/static/img/t6.jpg" alt="" class="slide-img"></a></div>
    </div>
  </div>
</div>
<!-- http://hokaccha.github.com/js-flipsnap/ -->
<script src="/app/static/js/flip.min.js"></script>
<script>
  function getWidth() {
    var e = window
      , i = e.document
      , n = i.body
      , t = i.documentElement;
    return e.innerWidth || i.compatMode === "CSS1Compat" && t.clientWidth || n && n.clientWidth || t.clientWidth;
}

var flip = Flipsnap('#slider-show .flipsnap', {
	transitionDuration: 100,
  distance: getWidth()/2,
  maxPoint: 30
});

var c = function f(e) {
    $(".slide-item-current").removeClass("slide-item-current");
    $(".slide-item-pre").removeClass("slide-item-pre");
    $(".slide-item-next").removeClass("slide-item-next");
    var r = flip.element.children[e.newPoint];
    if (r) {
        r.className += " slide-item-current"
    }
    var prev = flip.element.children[e.newPoint - 1];
    if (prev) {
        prev.className += " slide-item-pre"
    }
    var next = flip.element.children[e.newPoint + 1];
    if (next) {
        next.className += " slide-item-next"
    }
}
;
var m = 0;
flip.element.addEventListener("fstouchmove", function(e) {
    if (e.direction === 1 && m >= flip.element.children.length - 1) {
        e.preventDefault();
        flip.moveToPoint(flip.element.children.length - 1)
    }
});
flip.element.addEventListener("fstouchend", function(e) {
    m = e.newPoint;
    c(e)
}, false);

setTimeout(function() {
    flip.moveToPoint(1);
    c({
        newPoint: 1
    })
}, 0);
</script>