Создание слайда для баннера на всю ширину

Question

Есть ли способ сделать изображения баннеров, которые отображаются на сайте ниже, непрерывными?Я имею в виду, что в данном примере текущее изображение баннера обрезано слева и на его месте является частью предыдущего изображения.

Я хочу, чтобы текущее изображение занимало всю ширину баннера.Это возможно?

Вот шаблон сайта

Вот что я считаю важной частью слайдера:

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>

Answer 1

Полагаю, ваше изображение слишком маленькое, но обертка для слайд-шоу имеет отступ 490px слева. Попробуйте изменить его на 100px и посмотрите, что он делает. Это в slider.css первом стиле. #wrapper ul