Для моего сайта я пытаюсь сделать горизонтальную навигацию.Навигация хорошо работает с плагином 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>
Если мне нужно изменить плагины или другие предложения, просто скажите мне!
Большое спасибо!