SOURCE

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    initialSlide:2,
    slidesPerView: 4,
    centeredSlides: true,
    loop: true,
    slideToClickedSlide:true,
    // 如果需要分页器
    pagination: {
    el: '.swiper-pagination',
    },
})

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="slide-box a">
                    <div class="date">2017-02-02</div>
                    <div class="cont">
                        这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情
                    </div>
                </div>
            </div>
            <div class="swiper-slide ">
                <div class="slide-box b">
                    <div class="date">2017-02-04</div>
                    <div class="cont">
                        这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情
                    </div>
                </div>
            </div>
            <div class="swiper-slide ">
                <div class="slide-box c">
                    <div class="date">2017-02-04</div>
                    <div class="cont">
                        这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情
                    </div>
                </div>
            </div>
            <div class="swiper-slide ">
                <div class="slide-box d">
                    <div class="date">2017-02-05</div>
                    <div class="cont">
                        这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情
                    </div>
                </div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>

.swiper-container {
            width: 600px;
            height: 400px;
        }
        .a{
            background-color:#ffcbcb;
        }
        .b{
            background-color:#b6f1b6;
        }
        .c{
            background-color:#cdcdff;
        }
        .d{
            background-color:#ffffcb;
        }
        .e{
            color:#fff;
            background-color:black;
        }
        .swiper-slide-active{
            position: relative;
        }
        .swiper-slide-active .slide-box{
            height:200px;
            z-index:99999;
            top:-66px;
        }
        .swiper-slide-prev{
            top:-33px;
        }
        .swiper-slide-next{
            top:33px;
        }
        .slide-box{
            width:100%;
            position: absolute;
        }
        
        .date{
            height:100px;
            line-height: 100px;
        }
        .cont{
            display: none;
        }
        .swiper-slide-active .cont{
            display: block;
            line-height: 30px;
        }
        .swiper-wrapper{
            top:50px;
        }