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


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo