html - My jquery product slider has a big grey butt -
sorry title because don't know how describe question in 1 sentence.
i made picture describe better(this picture took while sliding.)
i'm using caroufredsel slider plugin , great, styling has been pain in butt me.whati want make sure slider doesn't have weird boarder/grey box more , slides ends on far edge slider starts in above picture.
here 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>
and here 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 { 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 } });
i fixed changing .list_carousel fixed size.