zoukankan      html  css  js  c++  java
  • swiper轮播问题之二:默认显示3张图片,中间显示全部两边显示部分

    其二:项目遇到比较有点要求的轮播图,默认显示3张图片,中间显示全部,两边显示部分。如图:

                                               

    网上找了也没有找到合适的,最后经过自己摸索写了出来,贴出代码分享给大家。

            CSS

    .swiper-container {
        margin-top: 20px;
        width: 750px;
        height: 320px;
        margin-bottom: 53px;
        overflow: visible!important;
    }
    .swiper-container .swiper-wrapper .swiper-slide{ width: 620px; border-radius: 20px;}
    .swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 320px; border-radius: 20px;}
    .swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 18px; height: 284px!important;}
    .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 284px!important;}
    .swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 18px; height: 284px!important;}
    .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 284px!important;}
    .swiper-container .swiper-wrapper .swiper-slide-active{ width: 620px;}
    
    .swiper-pagination{
        bottom: -30px!important;
    }
    .swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px; background: #ff1e1e;}
    .swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 12px; background: #e75230; border-radius: 6px;}

             DOM

    <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="/images/banner1.jpg" /></div>
                    <div class="swiper-slide"><img src="/images/banner2.jpg" /></div>
                    <div class="swiper-slide"><img src="/images/5.png" /></div>
                    <div class="swiper-slide"><img src="/images/banner2.jpg" /></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
     </div>

            js

    var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal',
                    loop: true,
                    autoplay: 5000,
                    slidesPerView: "auto",
                    centeredSlides:true,
                    spaceBetween: 20,
                    // 如果需要分页器
                    pagination: '.swiper-pagination',
     })


            以上就是我使用swiper的一点经验,其实对于swiper来说还是很浅显的,swiper加上TweenMax能做出很多很好很强大的动画和功能!下次有时间我会给大家分享点TweenMax的东西。。。

  • 相关阅读:
    字符转换(2,8,10,16进制,ASCII码)
    js正则表达式验证
    不能在DropDownList 中选择多个项
    SQL中sum(),avg()等统计结果为null的解决方法
    文本框TextBox只允许输入数字,不用onkeyup
    ORA01830: 日期格式图片在转换整个输入字符串之前结束
    Oracle数据库中的左连接与右连接
    asp.net服务器验证控件失效的问题
    在博客园开通博客的第一天
    米勒拉宾素数测试
  • 原文地址:https://www.cnblogs.com/toggle/p/7676473.html
Copyright © 2011-2022 走看看