Swiper中文论坛

标题: 有没有JS属性可以设置，控制边框的显示？ 江湖救急啊。 [打印本页]
作者: starrycheng    时间: 2015-7-10 15:41
标题: 有没有JS属性可以设置，控制边框的显示？ 江湖救急啊。
本帖最后由 starrycheng 于 2015-7-10 16:19 编辑

有没有JS属性可以设置，控制边框的显示？
先看图片：


“prevButton”和“nextButton”实际上是悬浮在了“Wrapper”上，而没有显示在间距
的里面。怎么样才可以让container和wrapper之间的左右间距显示出来，
然后按钮在间距的里面？？？而不是按钮直接悬浮在wrapper上，悬浮在
“swiper-slide”元素上。  有没有JS属性可以设置，控制边框的显示？

我尝试设置过margin-right属性，但是它不起作用。
margin-left是有作用的。 图片如下：

[size=14.3999996185303px]The HTML Code:
  1. <div class="nav-swipper swiper-container  swiper-container-horizontal">
  2.         <div class="swiper-wrapper">
  3.             <div class="swiper-slide"><span class="now"><b>你猜</b>测试</span></div>
  4.             <div class="swiper-slide"><span><b>你猜</b>测试</span></div>
  5.             <div class="swiper-slide"><span><b>你猜</b>测试</span></div>
  6.             <div class="swiper-slide"><span><b>你猜</b>测试</span></div>
  7.             <div class="swiper-slide"><span><b>你猜</b>测试</span></div>
  8.             <div class="swiper-slide"><span><b>再猜</b>测试</span></div>
  9.         </div>
  10.         <!-- Add Pagination -->
  11.         <!-- <div class="swiper-pagination"></div> -->
  12.         <div class="swiper-button-next"></div>
  13.         <div class="swiper-button-prev"></div>
  14.     </div>
复制代码

CSS 代码：

  1. .nav-swipper{background: #F2F2F2;height: 78px;box-sizing: border-box; border-top: 1px solid #979797;}
  2. <font color="#ff0000">.nav-swipper .swiper-wrapper{margin: 0px 24px;}</font>
  3. .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; }
  4. .nav-swipper .swiper-button-prev{background-image:url(../images/swiper-pre.png);background-size: 12px auto;left: 2px;right: auto;width: 12px;height: 19px;}
  5. .nav-swipper .swiper-button-next{background-image:url(../images/swiper-next.png);background-size: 12px auto;left: auto;right: 2px;width: 12px;height: 19px;}
  6. .nav-swipper span { display: inline-block; vertical-align: top;height: 64px; }
  7. .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; }
  8. .nav-swipper span.now b{border-color: #FF6602;}
复制代码

JS代码：
  1. var swiper = new Swiper('.nav-swipper', {
  2.         pagination: '.swiper-pagination',
  3.         slidesPerView: 4,
  4.         paginationClickable: true,
  5.         spaceBetween: 0,
  6.         nextButton: '.swiper-button-next',
  7.         prevButton: '.swiper-button-prev',
  8.     });
复制代码


Margin-right貌似是不起作用的。
有没有大神遇到过啊，

作者: admin    时间: 2015-7-10 22:03
用css调一下就好了，在container周边加div设置边框，把按钮放到contaner的外面与div之间，因为container设置了over-flow:hidden。
作者: starrycheng    时间: 2015-7-13 10:42
admin 发表于 2015-7-10 22:03
用css调一下就好了，在container周边加div设置边框，把按钮放到contaner的外面与div之间，因为container设 ...

谢谢外面加一个Section就可以了。



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2