对不起标题,因为我不知道如何用一句话来描述这个问题。
我做了一张图来更好地描述这个(这是我在滑动时拍的照片。)
我目前正在使用 caroufredsel slider 插件,它非常棒,但它的样式设计对我来说一直是个难题。我想做的是确保 slider 没有任何奇怪的边框/灰色框更多,幻灯片在远端边缘结束,就像上图中 slider 开始的地方一样。
这是 html:
div class="list_carousel">
<ul id="foo2">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
<a id="prev2" class="prev" href="#"><</a>
<a id="next2" class="next" href="#">></a>
<div id="pager2" class="pager"></div>
</div>
这是CSS
.list_carousel {
background-color: #ccc;
margin: 0 0 30px 47.5px;
height: 280px;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #999;
text-align: center;
background-color: #eee;
border: 5px solid #999;
width: 180px;
height: 250px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix {
float: none;
clear: both;
}
.prev {
float: left;
margin-left: 10px;
}
.next {
float: right;
margin-right: 10px;
}
.pager {
float: left;
width: 300px;
text-align: center;
}
.pager a {
margin: 0 5px;
text-decoration: none;
}
.pager a.selected {
text-decoration: underline;
}
.timer {
background-color: #999;
height: 6px;
width: 0px;
}
javascript:
$('#foo2').carouFredSel({
auto: false,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
最佳答案
我通过将 .list_carousel 更改为固定大小来修复它。
关于jquery - 我的 jquery 产品 slider 有一个灰色的大屁股,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18305758/