swiper.js垂直滚动并放大当前项效果

效果：

---

1. HTML：

<div class="gpr_rankingArea" id="gpr_rankingArea">
    <!-- Swiper -->
    <div class="swiper-container swiper-no-swiping" id="swiper_container">
        <div class="swiper-wrapper" >
            <div class="swiper-slide gpr_ranking_slide">
                <span class="gpr_ranking_number">1</span>
                <span class="gpr_ranking_country">美国 <img
                        src="images/home/icon-usa.png" alt="USA" class="gpr_ranking_flag"></span>
                <span class="gpr_ranking_name">William Alex Foxen</span>
                <span class="gpr_ranking_score">3,772.29</span>
                <span class="gpr_ranking_trend"><img src="images/home/icon-arrowTop.png" alt=""></span>
            </div>
            <div class="swiper-slide gpr_ranking_slide">
                <span class="gpr_ranking_number">2</span>
                <span class="gpr_ranking_country">英国 <img
                        src="images/home/icon-england.png" alt="英国" class="gpr_ranking_flag"></span>
                <span class="gpr_ranking_name">Stephen Chidwick</span>
                <span class="gpr_ranking_score">3,469.43</span>
                <span class="gpr_ranking_trend"><img src="images/home/icon-arrowTop.png" alt=""></span>
            </div>
            <div class="swiper-slide gpr_ranking_slide">
                <span class="gpr_ranking_number">3</span>
                <span class="gpr_ranking_country">哥伦比亚 <img
                        src="images/home/icon-columbia.png" alt="哥伦比亚" class="gpr_ranking_flag"></span>
                <span class="gpr_ranking_name">Farid Jattin</span>
                <span class="gpr_ranking_score">3,133.56</span>
                <span class="gpr_ranking_trend"><img src="images/home/icon-arrowDown.png" alt=""></span>
            </div>
            <div class="swiper-slide gpr_ranking_slide">
                <span class="gpr_ranking_number">4</span>
                <span class="gpr_ranking_country">美国 <img
                        src="images/home/icon-usa.png" alt="美国" class="gpr_ranking_flag"></span>
                <span class="gpr_ranking_name">Anthony Zinno</span>
                <span class="gpr_ranking_score">3,132.62</span>
                <span class="gpr_ranking_trend"><img src="images/home/icon-arrowDown.png" alt=""></span>
            </div>
            <div class="swiper-slide gpr_ranking_slide">
                <span class="gpr_ranking_number">5</span>
                <span class="gpr_ranking_country">加拿大 <img
                        src="images/home/icon-canada.png" alt="加拿大" class="gpr_ranking_flag"></span>
                <span class="gpr_ranking_name">Timothy</span>
                <span class="gpr_ranking_score">3,131.43</span>
                <span class="gpr_ranking_trend"><img src="images/home/icon-arrowTop.png" alt=""></span>
            </div>
            <div class="swiper-slide gpr_ranking_slide">
                <span class="gpr_ranking_number">6</span>
                <span class="gpr_ranking_country">加拿大 <img
                        src="images/home/icon-canada.png" alt="加拿大" class="gpr_ranking_flag"></span>
                <span class="gpr_ranking_name">Sam Greenwood</span>
                <span class="gpr_ranking_score">3,074.82</span>
                <span class="gpr_ranking_trend"><img src="images/home/icon-arrowDown.png" alt=""></span>
            </div>
            <div class="swiper-slide gpr_ranking_slide">
                <span class="gpr_ranking_number">7</span>
                <span class="gpr_ranking_country">澳大利亚 <img
                        src="images/home/icon-australia.png" alt="澳大利亚" class="gpr_ranking_flag"></span>
                <span class="gpr_ranking_name">Kahle Burns</span>
                <span class="gpr_ranking_score">3,052.89</span>
                <span class="gpr_ranking_trend"><img src="images/home/icon-arrowTop.png" alt=""></span>
            </div>
            <div class="swiper-slide gpr_ranking_slide">
                <span class="gpr_ranking_number">8</span>
                <span class="gpr_ranking_country">加拿大 <img
                        src="images/home/icon-canada.png" alt="加拿大" class="gpr_ranking_flag"></span>
                <span class="gpr_ranking_name">Kristen</span>
                <span class="gpr_ranking_score">3,032.40</span>
                <span class="gpr_ranking_trend"><img src="images/home/icon-arrowTop.png" alt=""></span>
            </div>
            <div class="swiper-slide gpr_ranking_slide">
                <span class="gpr_ranking_number">9</span>
                <span class="gpr_ranking_country">西班牙 <img
                        src="images/home/icon-spain.png" alt="西班牙" class="gpr_ranking_flag"></span>
                <span class="gpr_ranking_name">Adrian Mateos</span>
                <span class="gpr_ranking_score">3,029.28</span>
                <span class="gpr_ranking_trend"><img src="images/home/icon-arrowTop.png" alt=""></span>
            </div>
        </div>
    </div>
    <div class="swiper-button-next gpr_viewMore"></div>
</div>

2. css:

<link rel="stylesheet" href="css/swiper.min.css">

.gpr_rankingArea{ position: relative; height: 500px; clear: both; }
.swiper-container { width: 100%; height: 100%;}
.gpr_viewMore{ outline: none; bottom: -75px; top: auto; right: 106px; background: url("../images/gpr-more-btn.png") no-repeat; width: 206px; height: 69px; display: block; margin: auto}
.gpr_viewMore:after{ content: ''}
.gpr_ranking_slide{ height: 43px; line-height: 43px; text-align: right; background: url("../images/gpr-bg.png") no-repeat 60% 50%; width: 100%; font-size: 18px;}
.gpr_ranking_number,.gpr_ranking_score{ padding-right: 10px;}
.gpr_ranking_country{ width: 95px; display: inline-block; text-align: left; margin-right: -10px;}
.gpr_ranking_flag{ width: 18px; height: 18px;}
.gpr_ranking_name{ width: 180px; display: inline-block; padding-right: 15px; text-align: center}
.gpr_ranking_trend{ width: 16px; height: 20px; display: inline-block;  line-height: 20px; margin-right: 40px}
.gpr_ranking_trend img{ width: 100%}
.gpr_rankingArea .gpr_ranking_slide:hover,.gpr_rankingArea .swiper-slide-active { transform: scale(1.2) translateX(-10px); background: url("../images/gpr-bg-hover.png") no-repeat 100% 50%;  }
.gpr_rankingArea .swiper-slide-active .gpr_ranking_score{ margin-left: -5px}

.gpr_ranking_slide:hover,.swiper-slide-active控制hover和当前放大效果。

3. JS：

<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>

<script type="text/javascript">
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (width > 900) {
        var rankingSwiper = new Swiper('#gpr_rankingArea .swiper-container', {
            speed: 100,
            loop: true,
            // 默认显示几条数据
            slidesPerView: 9,
            // 定义slides的数量多少为一组，点一次滚几条数据
            //slidesPerGroup: 1,
            //slide的间距，样式中设置的间距不被计算会出现滚动差异问题
            spaceBetween: 10,
            //垂直方向滚动
            direction: 'vertical',
            //点击切换
            navigation: {
                nextEl: '.swiper-button-next',
            },
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true //修改swiper的父元素时，自动初始化swiper
        });
    } else {
        var rankingSwiper = new Swiper('#gpr_rankingArea .swiper-container', {
            speed: 100,
            loop: true,
            //移动端要设置auto，否则适配不同设备的时候不好看
            slidesPerView: 'auto',
            spaceBetween: 10,
            direction: 'vertical',
            navigation: {
                nextEl: '.swiper-button-next',
            },
            observer: true,
            observeParents: true
        });
    }
</script>

至此大功告成。手动撒花✿✿ヽ(°▽°)ノ✿

---

这里的原理就是利用swiper.js默认的左右滚动，只选取一个按钮，然后设置滚动方向为竖向、改造一个button实现单向滚动。放大的效果就是利用css的transform放大即可。