对于我的网站，我正在尝试进行水平导航。导航与插件 jQuery.serialScroll 配合得很好，但是我无法确保所选项目居中，尤其是当不同项目具有不同宽度时。
我可以更改偏移量，但它会更改整个幻灯片，而不是单个项目。
<script type="text/javascript">
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
jQuery(function( $ ){
$('article').serialScroll({
items:'section',
prev:'nav #prev',
next:'nav #next',
start:0, //as we are centering it, start at the 2nd
duration:1000,
offset:-240,
force:true,
stop:true,
lock:false,
cycle:false, //don't pull back once you reach the end
easing:'easeOutQuart', //use this easing equation for a funny effect
jump: true //click on the images to scroll to them
});
$(document).keyup(function(e){
switch( e.keyCode ){
case 39://right (->)
$('article').trigger('next');
break;
case 37://left (<-)
$('article').trigger('prev');
break;
}
});
});
</script>
这是HTML：
<article>
<div>
<section id="page-1">
<p>Maecenas nisl lacus, pharetra id dapibus a, commodo et justo. Quisque commodo cursus risus in convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum sollicitudin enim non placerat. Nullam a pretium urna. Morbi fermentum venenatis eleifend. Nulla sit amet risus et justo convallis fringilla ut sed neque. In hac habitasse platea dictumst. Integer eleifend tellus sed nulla ullamcorper non sollicitudin turpis sagittis. Cras dui dolor, cursus non dignissim et, tristique quis est.<br/>
Duis vel diam vitae libero adipiscing iaculis ac eget lorem. Nulla nec ante justo. Pellentesque augue magna, blandit id sollicitudin et, iaculis vel nibh. Nullam non arcu quis mi luctus lobortis. Phasellus sed ante quam, at dictum odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nunc odio, fringilla quis luctus ac, aliquet ut erat. Mauris interdum eleifend nunc non semper. Aenean placerat aliquet odio at pellentesque. Donec placerat volutpat dolor non malesuada. Suspendisse tincidunt tellus eu ligula porttitor quis faucibus velit convallis. Donec semper, dui iaculis imperdiet rutrum, enim odio fringilla eros, in euismod mauris metus sit amet augue. Mauris adipiscing feugiat ante, vel lobortis quam consectetur at. In hac habitasse platea dictumst. Duis volutpat dolor eget massa accumsan ac pulvinar dolor faucibus. Praesent ultricies, lectus eu cursus cursus, augue mauris fringilla enim, in euismod arcu lorem eu libero. Nam vel fermentum purus. Suspendisse vulputate pharetra nibh nec rutrum. Integer luctus condimentum turpis, tristique sodales tellus blandit sit amet. </p>
</section>
<section id="page-2">
<p>Maecenas nisl lacus, pharetra id dapibus a, commodo et justo. Quisque commodo cursus risus in convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum sollicitudin enim non placerat. Nullam a pretium urna. Morbi fermentum venenatis eleifend. Nulla sit amet risus et justo convallis fringilla ut sed neque. In hac habitasse platea dictumst. Integer eleifend tellus sed nulla ullamcorper non sollicitudin turpis sagittis. Cras dui dolor, cursus non dignissim et, tristique quis est.<br/>
Duis vel diam vitae libero adipiscing iaculis ac eget lorem. Nulla nec ante justo. Pellentesque augue magna, blandit id sollicitudin et, iaculis vel nibh. Nullam non arcu quis mi luctus lobortis. Phasellus sed ante quam, at dictum odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nunc odio, fringilla quis luctus ac, aliquet ut erat. Mauris interdum eleifend nunc non semper. Aenean placerat aliquet odio at pellentesque. Donec placerat volutpat dolor non malesuada. Suspendisse tincidunt tellus eu ligula porttitor quis faucibus velit convallis. Donec semper, dui iaculis imperdiet rutrum, enim odio fringilla eros, in euismod mauris metus sit amet augue. Mauris adipiscing feugiat ante, vel lobortis quam consectetur at. In hac habitasse platea dictumst. Duis volutpat dolor eget massa accumsan ac pulvinar dolor faucibus. Praesent ultricies, lectus eu cursus cursus, augue mauris fringilla enim, in euismod arcu lorem eu libero. Nam vel fermentum purus. Suspendisse vulputate pharetra nibh nec rutrum. Integer luctus condimentum turpis, tristique sodales tellus blandit sit amet. </p>
</section>
<section id="page-3">
<p>Maecenas nisl lacus, pharetra id dapibus a, commodo et justo. Quisque commodo cursus risus in convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum sollicitudin enim non placerat. Nullam a pretium urna. Morbi fermentum venenatis eleifend. Nulla sit amet risus et justo convallis fringilla ut sed neque. In hac habitasse platea dictumst. Integer eleifend tellus sed nulla ullamcorper non sollicitudin turpis sagittis. Cras dui dolor, cursus non dignissim et, tristique quis est.<br/>
Duis vel diam vitae libero adipiscing iaculis ac eget lorem. Nulla nec ante justo. Pellentesque augue magna, blandit id sollicitudin et, iaculis vel nibh. Nullam non arcu quis mi luctus lobortis. Phasellus sed ante quam, at dictum odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nunc odio, fringilla quis luctus ac, aliquet ut erat. Mauris interdum eleifend nunc non semper. Aenean placerat aliquet odio at pellentesque. Donec placerat volutpat dolor non malesuada. Suspendisse tincidunt tellus eu ligula porttitor quis faucibus velit convallis. Donec semper, dui iaculis imperdiet rutrum, enim odio fringilla eros, in euismod mauris metus sit amet augue. Mauris adipiscing feugiat ante, vel lobortis quam consectetur at. In hac habitasse platea dictumst. Duis volutpat dolor eget massa accumsan ac pulvinar dolor faucibus. Praesent ultricies, lectus eu cursus cursus, augue mauris fringilla enim, in euismod arcu lorem eu libero. Nam vel fermentum purus. Suspendisse vulputate pharetra nibh nec rutrum. Integer luctus condimentum turpis, tristique sodales tellus blandit sit amet. </p>
</section>
</div>
</article>
如果我需要更改插件或其他建议，请告诉我！
十分感谢！