jQuery Слайд в неправильном положении

Question

У меня есть followed the tutorial на jQuery для дизайнеров о том, как создать слайдер, похожий на Coda.

В любом случае, он работал в первый раз и отлично от одной вещи. Позиция последней панели всегда кажется не в том месте. Вот код, который я использую (это локальная установка WordPress, кстати, так что я не могу показать вам пример работы):

<div id="carousel"> 
<div class="scroll"> 
    <div class="scrollContainer"> 
     <p class="panel" id="slide1">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p> 
     <p class="panel" id="slide2">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p> 
     <p class="panel" id="slide3">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p> 
     <p class="panel" id="slide4">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p> 
     <p class="panel" id="slide5">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p> 
    </div><!--/scrollContainer--> 
</div><!--/scroll--> 
<ul> 
    <li><a href="#slide1">1</a></li> 
    <li>/</li> 
    <li><a href="#slide2">2</a></li> 
    <li>/</li> 
    <li><a href="#slide3">3</a></li> 
    <li>/</li> 
    <li><a href="#slide4">4</a></li> 
    <li>/</li> 
    <li><a href="#slide5">5</a></li> 
</ul> 
<a href="<?php bloginfo('url');?>/contact/" title="Get in Touch" id="carouselCTA"><img src="<?php bloginfo('template_directory');?>/images/get-in-touch-button.png" alt="Get in Touch Button" /></a> 

// bind the navigation clicks to update the selected nav: 
$('#carousel ul').find('a').click(selectNav); 

// handle nav selection - lots of nice chaining :-) 
function selectNav() { 
    $(this) 
    .parents('ul:first') // find the first UL parent 
     .find('a') // find all the A elements 
     .removeClass('selected') // remove from all 
     .end() // go back to all A elements 
    .end() // go back to 'this' element 
    .addClass('selected'); 
} 

function trigger(data) { 
    // within the .navigation element, find the A element 
    // whose href ends with ID ($= is ends with) 
    var el = $('#carousel ul').find('a[href$="' + data.id + '"]').get(0); 

    // we're passing the actual element, and not the jQuery instance. 
    selectNav.call(el); 
} 

if (window.location.hash) { 
    trigger({ id : window.location.hash.substr(1)}); 
} else { 
    $('#carousel ul a:first').click(); 
} 

// when the DOM is ready... 
$(document).ready(function() { 

var $panels = $('#carousel .scrollContainer > p'); 
var $container = $('#carousel .scrollContainer'); 

// if false, we'll float all the panels left and fix the width 
// of the container 
var horizontal = true; 

// float the panels left if we're going horizontal 
if (horizontal) { 
    $panels.css({ 
    'float' : 'left', 
    'position' : 'relative' // IE fix to ensure overflow is hidden 
    }); 

    // calculate a new width for the container (so it holds all panels) 
    $container.css('width', $panels[0].offsetWidth * $panels.length); 
} 

// collect the scroll object, at the same time apply the hidden overflow 
// to remove the default scrollbars that will appear 
var $scroll = $('#carousel .scroll').css('overflow', 'hidden'); 


// handle nav selection 
function selectNav() { 
    $(this) 
    .parents('ul:first') 
     .find('a') 
     .removeClass('selected') 
     .end() 
    .end() 
    .addClass('selected'); 
} 

$('#carousel ul').find('a').click(selectNav); 

// go find the navigation link that has this target and select the nav 
function trigger(data) { 
    var el = $('#carousel ul').find('a[href$="' + data.id + '"]').get(0); 
    selectNav.call(el); 
} 

if (window.location.hash) { 
    trigger({ id : window.location.hash.substr(1) }); 
} else { 
    $('ul a:first').click(); 
} 

// offset is used to move to *exactly* the right place, since I'm using 
// padding on my example, I need to subtract the amount of padding to 
// the offset. Try removing this to get a good idea of the effect 
var offset = parseInt((horizontal ? 
    $container.css('paddingTop') : 
    $container.css('paddingLeft')) 
    || 0) * -1; 


var scrollOptions = { 
    target: $scroll, // the element that has the overflow 

    // can be a selector which will be relative to the target 
    items: $panels, 

    navigation: 'ul a', 

    // selectors are NOT relative to document, i.e. make sure they're unique 
// prev: 'img.left', 
    //next: 'img.right', 

    // allow the scroll effect to run both directions 
    axis: 'xy', 

    onAfter: trigger, // our final callback 

    offset: offset, 

    // duration of the sliding effect 
    duration: 500, 

    // easing - can be used with the easing plugin: 
    // http://gsgd.co.uk/sandbox/jquery/easing/ 
    easing: 'swing' 
}; 

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation. 
$('#carousel').serialScroll(scrollOptions); 

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect 
$.localScroll(scrollOptions); 

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the 
// very first page load. We don't always need this, but it ensures 
// the positioning is absolutely spot on when the pages loads. 
scrollOptions.duration = 1; 
$.localScroll.hash(scrollOptions); 

}); 

JQuery также использует плагины scrollTo, localScroll и serialScroll.

Любая помощь была бы принята с благодарностью. Просто для измерения, вот CSS, который я тоже использую:

div.scroll { 
    position:relative; 
    overflow:auto; 
    float:left; 
    width:535px; 
    height:135px; 
} 

.scrollContainer p.panel { 
    width:535px; 
    height:135px; 
    font-size:32px; 
    color:#fff; 
} 

#carousel p span { 
    color:#ffc411; 
} 

#carousel ul { 
    float:right; 
    text-transform:uppercase; 
    color:#b6b6b6; 
} 

#carousel li { 
    float:left; 
    margin:0 0 0 10px; 
} 

#carousel li a { 
    color:#fff; 
    text-decoration:none; 
} 

#carousel li a:hover, #carousel li a.selected { 
    color:#b6b6b6; 
} 

Answer 1

Это было немного глупо. Вместо того, чтобы иметь Cufon для дочернего элемента # carousel, у меня было это нацеливание на # carousel, поэтому вместо того, чтобы просто применить стиль к себе, он применял его к DIV. Что, конечно же, означало, что под карусели был добавлен холст-тег.

Применить Cufon к текстовым элементам, детям.

Answer 2

Я думаю, что ваша ошибка берет начало с CSS. Попробуйте изменить это:

#carousel li { 
    float:left; 
    margin:0 0 0 10px; 
} 

к этому

#carousel li { 
    float:left; 
    margin:0; 
} 

Если это работает, вы всегда можете сделать DIV внутри каждого слайда, который имеет 10px левое поле.