jQuery Slide dans la mauvaise position

Question

J'ai followed the tutorial sur jQuery pour les concepteurs sur la façon de créer un curseur similaire à Coda.

Quoi qu'il en soit, cela a fonctionné la première fois et est génial à part une chose. La position du dernier panneau semble toujours être au mauvais endroit. Voici le code que j'utilise (ce qui est une installation de WordPress locale en passant, donc je ne peux pas vous montrer un exemple de travail):

<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); 

}); 

Le jQuery utilise également les plugins scrollTo, localScroll et serialScroll.

Toute aide serait grandement appréciée. Juste pour mesurer, voici le CSS que j'utilise aussi:

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

C'était vraiment un peu stupide. Plutôt que d'avoir Cufon cible l'enfant de #carousel, je l'ai eu ciblant #carousel lui-même, donc plutôt que de simplement appliquer le style à lui-même, il l'appliquait à un DIV. Ce qui, bien sûr, signifiait qu'il y avait une étiquette de toile étant ajouté sous le carrousel.

Appliquez Cufon uniquement aux éléments de texte enfants.

Answer 2

Je pense que votre erreur provient du CSS. Essayez de changer ceci:

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

à cette

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

Si cela fonctionne, vous pouvez toujours faire une div à l'intérieur de chaque diapositive, qui a une marge de 10px gauche.