我的jquery产品滑块有一个灰色的大屁股

时间:2013-08-19 02:49:54

标签: jquery html css slider caroufredsel

对标题感到抱歉,因为我不知道如何用一句话来描述这个问题。

我做了一张照片来更好地描述这个(这是我在滑动时拍摄的照片。)

我目前正在使用caroufredsel滑块插件,它很棒,但造型对我来说一直很痛苦。我想做的是确保滑块没有奇怪的边框/灰色框任何更多,幻灯片在远边缘结束,就像上图中滑块开始的位置一样。

这是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="#">&lt;</a>
            <a id="next2" class="next" href="#">&gt;</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
    }
});

1 个答案:

答案 0 :(得分:0)

我通过将.list_carousel更改为固定大小来修复它。