私のウェブサイトでは、水平方向のナビゲーションを作成しようとしています。ナビゲーションはプラグインjQuery.serialScrollでうまく機能しますが、特に異なるアイテムの幅が異なる場合は、選択したアイテムが中央に配置されていることを確認できません。
オフセットを変更することはできますが、1つのアイテムではなく、スライドショー全体で変更されます。
<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>
プラグインやその他の提案を変更する必要がある場合は、教えてください。
大いに感謝する！