Swiper中文论坛

标题: 请问如何控制slider的宽度 [打印本页]
作者: 飘香神栗    时间: 2015-5-5 16:07
标题: 请问如何控制slider的宽度
在样式里通过width控制为何会无效？
  1. .swiper-slide {
  2.         text-align: center;
  3.         font-size: 18px;
  4.         background: #fff;
  5.         width: 80%;
复制代码

作者: 小小志    时间: 2015-5-5 17:33
这个要看下 slider 里面元素的样式怎么设置
作者: 飘香神栗    时间: 2015-5-5 17:48
slider里面就放了一个img控件用来显示图片的啊，图片的宽度设置为100%
  1. <div class="swiper-slide"><img style="width:100%;" src="http://img31.mtime.cn/mt/2015/03/30/132850.81039914_1280X720X2.jpg"></img></div>
复制代码
作者: admin    时间: 2015-5-5 18:00
可以把图片设成80%或者在slide里面加个div设成80%嘛，还要看你想要实现的效果具体分析的
作者: 飘香神栗    时间: 2015-5-5 18:06
我的意思就是，图片这个大小比例在手机上显示出来太小了，我想放大点，但是无论我怎么调整swiper-slide的width都无效，为什么会这样？
我把整个页面代码贴下吧
  1. <!-- HTML5文件 -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.         <meta charset="utf-8"/>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  7. <title show="false"></title>
  8. <link rel="stylesheet" href="../../script/swiper/swiper.min.css">
  9. <style>
  10.         body {
  11.         background: #eee;
  12.         font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  13.         font-size: 14px;
  14.         color:#000;
  15.         margin: 0;
  16.         padding: 0;
  17.         
  18.     }
  19.     .swiper-container {
  20.         width: 100%;
  21.         height: 400px;
  22.         margin: 20px auto;
  23.         background-image: url([img]http://img31.mtime.cn/mt/2015/03/30/132850.81039914_1280X720X2.jpg[/img]);
  24.     }
  25.     .swiper-slide {
  26.         text-align: center;
  27.         font-size: 18px;
  28.         background: transparent;
  29.         background-size: cover;
  30.         background-position: center;
  31.         width: 100%;

  33.         /* Center slide text vertically */
  34.         display: -webkit-box;
  35.         display: -ms-flexbox;
  36.         display: -webkit-flex;
  37.         display: flex;
  38.         -webkit-box-pack: center;
  39.         -ms-flex-pack: center;
  40.         -webkit-justify-content: center;
  41.         justify-content: center;
  42.         -webkit-box-align: center;
  43.         -ms-flex-align: center;
  44.         -webkit-align-items: center;
  45.         align-items: center;
  46.     }
  47.     .swiper-slide:nth-child(2n) {
  48.         width: 40%;
  49.     }
  50.     .swiper-slide:nth-child(3n) {
  51.         width: 20%;
  52.     }
  53.    
  54.     .blur {   
  55.             -webkit-filter: blur(15px); /* Chrome, Opera */
  56.                -moz-filter: blur(15px);
  57.                 -ms-filter: blur(15px);   
  58.                     filter: blur(15px);   
  59.         }
  60. </style>
  61. </head>
  62. <body>
  63.        
  64.         <!-- Swiper -->
  65.     <div class="swiper-container blur">
  66.         <div class="swiper-wrapper">
  67.             <div class="swiper-slide"><img style="width:100%;height:60%" src="http://img31.mtime.cn/mt/2015/03/30/132850.81039914_1280X720X2.jpg"></img></div>
  68.             <div class="swiper-slide"><img style="width:100%;height:60%" src="http://img31.mtime.cn/mt/2015/03/27/120535.53814152_1280X720X2.jpg"></img></div>
  69.             <div class="swiper-slide"><img style="width:100%;height:60%" src="http://img31.mtime.cn/mt/2015/04/27/160431.68946159_1280X720X2.jpg"></img></div>
  70.             <div class="swiper-slide"><img style="width:100%;height:60%" src="http://img31.mtime.cn/mt/2015/04/13/091349.58563474_1280X720X2.jpg"></img></div>
  71.             <div class="swiper-slide"><img style="width:100%;height:60%" src="http://img31.mtime.cn/mt/2015/04/22/095151.77465299_1280X720X2.jpg"></img></div>
  72.                 <div class="swiper-slide"><img style="width:100%;height:60%" src="http://img31.mtime.cn/mt/2015/03/17/095942.88667571_1280X720X2.jpg"></img></div>
  73.         </div>
  74.         <!-- Add Pagination -->
  75.         <div class="swiper-pagination"></div>
  76.     </div>
  77.        
  78.        
  79. <!-- swiper滑动组件 -->
  80. <script type="text/javascript" src="../../script/swiper/swiper.min.js"></script>
  81. <script>
  82.         var swiper = new Swiper('.swiper-container', {
  83.         slidesPerView: 2,
  84.         centeredSlides: true,
  85.         spaceBetween: 25
  86.     });
  87. </script>
  88. </body>
  89. </html>
复制代码




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