zoukankan      html  css  js  c++  java
  • Swiper使用方法(向前和向后按钮在swiper-container外面)

    Swiper插件的使用
    1、HTML
    <!-- Swiper -->
    <section class="swipper">
     <div class="swiper-button-next"></div>
        <div class="nav-swipper swiper-container  swiper-container-horizontal">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><span class="now"><b><img src="images/swiper-1.png" height="25" width="auto" alt=""></b>股票</span></div>
                <div class="swiper-slide"><span><b><img src="images/swiper-2.png" height="25" width="auto" alt=""></b>债券</span></div>
                <div class="swiper-slide"><span><b><img src="images/swiper-3.png" height="25" width="auto" alt=""></b>公益</span></div>
                <div class="swiper-slide"><span><b><img src="images/swiper-4.png" height="25" width="auto" alt=""></b>实物</span></div>
                <div class="swiper-slide"><span><b>你猜</b>测试</span></div>
                <div class="swiper-slide"><span><b>再猜</b>测试</span></div>
            </div>
            <!-- Add Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
        </div>
        <div class="swiper-button-prev"></div>
        <!-- Swiper End-->
    </section>
     2、CSS
    .nav-swipper{background: #F2F2F2;height: 78px;box-sizing: border-box;}
    /*.nav-swipper .swiper-wrapper{margin: 0px 24px;}*/
    .nav-swipper .swiper-slide {margin: 0px;text-align: center; font-size: 13px;color: #999; background: #F2F2F2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
    section.swipper {border-top: 1px solid #979797;padding: 0px 24px;position: relative;}
    section.swipper .swiper-button-prev{top:50%;background-image:url(../images/swiper-pre.png);background-size: 12px auto;left: 10px;right: auto;width: 12px;height: 19px;}
    section.swipper .swiper-button-next{top:50%;background-image:url(../images/swiper-next.png);background-size: 12px auto;left: auto;right: 10px;width: 12px;height: 19px;}
    .nav-swipper span { display: inline-block; vertical-align: top;height: 64px; }
    .nav-swipper b { height: 42px; display: table-cell; vertical-align: middle; width: 42px; text-align: center; background: #F7F7F7; border-radius: 50%; border: #fff 1px solid; color: #ccc; box-shadow: 0px 1px 3px #999; }
    .nav-swipper span.now b{border-color: #FF6602;}

    3、JS

    var swiper = new Swiper('.nav-swipper', {
            pagination: '.swiper-pagination',
            slidesPerView: 4,
            paginationClickable: true,
            spaceBetween: 0,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        });
     “swiper-button-next”和“swiper-button-prev”两个button是可以脱离在“swiper-container”外面的。因为“swiper-container”的Margin-left起作用,但是Margin-right不起作用(设置了over-flow:hidden),所以没有办法设置“swiper-container”的外边距。但是可以在“swiper-container”外面加一个容器,然后设置它的padding,再把“向左、向右的按钮”放在padding的间距里面。padding 要使用px,rem有时候不起作用。
     
    swiper使用的一般方法如链接所示:http://www.swiper.com.cn/usage/index.html
  • 相关阅读:
    通用权限管理设计 之 数据库结构设计
    jQuery LigerUI 插件介绍及使用之ligerDateEditor
    jQuery LigerUI 插件介绍及使用之ligerTree
    jQuery LigerUI V1.01(包括API和全部源码) 发布
    jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)
    jQuery LigerUI V1.1.5 (包括API和全部源码) 发布
    jQuery LigerUI 使用教程表格篇(1)
    jQuery LigerUI V1.0(包括API和全部源码) 发布
    jQuery LigerUI V1.1.0 (包括API和全部源码) 发布
    nginx keepalived
  • 原文地址:https://www.cnblogs.com/ssol/p/4643642.html
Copyright © 2011-2022 走看看