Is there a way to ensure that the banner images in the website below flow seamlessly? Currently, it seems like the current image is cut off on the left and part of the previous image shows up in its place.
I'd like the current image to occupy the entire width of the banner. Is this achievable?
Check out the Website Template Here
Here are the key sections of the Slider:
CSS:
.wrapper ul {
padding-left:490px
}
.anythingSlider {
position:relative
}
.anythingSlider .wrapper {
width:1920px;
overflow:auto;
height:405px
}
/* Width below is max for Opera */
.anythingSlider .wrapper ul {
width:32700px;
list-style:none
}
.anythingSlider .wrapper ul li {
display:block;
float:left;
padding:0;
width:auto;
margin:0
}
JavaScript:
base.setCurrentPage = function(page, move) {
// Set visual
if (base.options.buildNavigation){
base.$nav.find('.cur').removeClass('cur');
captions.fadeIn(50);
$(base.$navLinks[page - 1]).addClass('cur');
};
// Only change left if move does not equal false
if (move !== false) base.$wrapper.scrollLeft(base.singleWidth * page);
// Update local variable
base.currentPage = page;
};
base.goForward = function(autoplay) {
if(autoplay !== true) autoplay = false;
base.gotoPage(base.currentPage + 1, autoplay);
captions.fadeOut(200);
};
base.goBack = function() {
base.gotoPage(base.currentPage - 1);
captions.fadeOut(200);
};
HTML:
<div id="slider-container">
<div id="slider-holder">
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>
<a href="#"><img src="images/content/banner1.png" alt="" /></a>
<p class="caption">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores</p>
</li>
<li>
<a href="#"><img src="images/content/banner2.gif" alt="" /></a>
<p class="caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione</p>
</li>
<li>
<a href="#"><img src="images/content/banner3.gif" alt="" /></a>
<p class="caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
</li>
</ul>
</div>
</div>
<div id="bevel"></div>
</div>
</div>