异型轮播

异性轮播

异型轮播

2019年9月11日,项目中又遇到一个不常规的轮播图,之前也遇到过,都稀里糊涂的解决了,今天准备做一个总结,此异性轮播还是借助swiper框架,主要需要对样式进行调整

需求的效果

异型轮播_第1张图片

代码

// An highlighted block
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Swiper-Scale效果</title>
        <!--  这里要引用swiper的CSS-->
        <link rel="stylesheet" href="../js/swiper-3.4.2.min.css" />
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            a {
                text-decoration: none;
            }

            .ry-content {
                position: relative;
                margin-top: 140px;
            }
            .ry-swiper {
                width: 1194px;
                cursor: pointer;
                padding: 20px 0 60px;
            }
            .ry-pagination {
                margin-top: 20px;
            }
            .ry-swiper .swiper-slide {
                width: 368px;
                background-color: #fff;
                opacity: .7;
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                -moz-transform: scale(0.8);
                -webkit-transition: transform 1.0s;
                -moz-transition: transform 1.0s;
            }
            .ry-swiper .swiper-slide-active {
                transform: scale(1);
                opacity: 1;
                z-index: 10;
            }</style>
    </head>
    <body>
        <div class="ry-content">
            <div class="swiper-container ry-swiper" id="ry
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img src="../img/banner5.jpg" class="ry-cert" />
                    </div>
                    <div class="swiper-slide">
                      <img src="../img/banner2.jpg" class="ry-cert" />
                    </div>
                    <div class="swiper-slide">
                       <img src="../img/banner3.jpg" class="ry-cert" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/banner4.gif"  class="ry-cert" />
                    </div
                </div>
            </div>
        </div>
        <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="../js/swiper-3.4.2.jquery.min.js"></script>
        <script>
            var mySwiper = new Swiper('#rySwiper', {
                pagination: '.swiper-pagination',
                autoplay: 1500,
                loop: true,
                slidesPerView: 'auto',
                centeredSlides: true,
            });
        </script>
    </body>
</html>

本文链接:https://blog.csdn.net/qq_16371909/article/details/80840830

你可能感兴趣的:(swiper,swiper)