请问如何控制slider的宽度

飘香神栗 · 发表于 2015-5-5 16:07:11

在样式里通过width控制为何会无效？

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 80%;

复制代码

小小志 · 发表于 2015-5-5 17:33:55

这个要看下 slider 里面元素的样式怎么设置

飘香神栗 · 发表于 2015-5-5 17:48:32

slider里面就放了一个img控件用来显示图片的啊，图片的宽度设置为100%

<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:54

可以把图片设成80%或者在slide里面加个div设成80%嘛，还要看你想要实现的效果具体分析的

飘香神栗 · 发表于 2015-5-5 18:06:25

我的意思就是，图片这个大小比例在手机上显示出来太小了，我想放大点，但是无论我怎么调整swiper-slide的width都无效，为什么会这样？
我把整个页面代码贴下吧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title show="false"></title>
<link rel="stylesheet" href="../../script/swiper/swiper.min.css">
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 400px;
margin: 20px auto;
background-image: url([img]http://img31.mtime.cn/mt/2015/03/30/132850.81039914_1280X720X2.jpg[/img]);
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: transparent;
background-size: cover;
background-position: center;
width: 100%;
/* Center slide text vertically */
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;
}
.swiper-slide:nth-child(2n) {
width: 40%;
}
.swiper-slide:nth-child(3n) {
width: 20%;
}
.blur {
-webkit-filter: blur(15px); /* Chrome, Opera */
-moz-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}
</style>
</head>
<body>
<div class="swiper-container blur">
<div class="swiper-wrapper">
<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>
<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>
<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>
<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>
<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>
<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>
</div>
<div class="swiper-pagination"></div>
</div>
<script type="text/javascript" src="../../script/swiper/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
centeredSlides: true,
spaceBetween: 25
});
</script>
</body>
</html>

复制代码