0
Pour mon site web, j'essaie de faire une navigation horizontale. La navigation fonctionne bien avec le plugin jQuery.serialScroll, mais je ne parviens pas à m'assurer que l'élément sélectionné est centré, notamment lorsque les différents éléments ont des largeurs différentes.Comment centrer l'élément sélectionné dans un diaporama à l'aide de jQuery.serialScroll?
Je peux modifier le décalage, mais il changera pour l'ensemble du diaporama, et non pour un seul élément.
<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>
Voici le code 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>
Si je dois changer les plugins ou autres suggestions, juste me dire!
Merci beaucoup!