I am looking to implement horizontal scrolling using jQuery.SerialScroll (based on jQuery.ScrollTo).
I currently have a continuous horizontal scrolling working with liScroll as I discuss in this post.
However, now I need discrete scrolling and I have SerialScroll working perfectly for vertical scrolling.
For some reason, if the 'axis' property is specified as 'x' nothing happens.
I can't even get the SerialScroll example for right to left scrolling to work.
I have HTML like this:
<div id="pane">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
I have jQuery like this, that works when axis is 'y'
jQuery(function($) {
var $pane = $('#pane');
$pane.serialScroll({
items: 'div',
next: $pane, // the container itself will get bound
duration: 2100,
force: true,
axis: 'x',
step: 1, //scroll 1 news each time
event: 'showNext' //just a random event name
});
setInterval(function() {//scroll each 12 seconds
$pane.trigger('showNext');
}, 12000);
});
Any ideas?
//Edit (answer accepted)
For those that come along, the accepted answer gets rid of the need for "serialScroll" (just need scrollTo). Heights weren't required. Be sure to change $('scroller') to something like $('mywrap') or $(target.parent().parent()). You can also set up automatic scrolling like this:
var index = 2;
setInterval(function() {//scroll each 5 seconds
index = index > $('#news ul li').length ? 1 : index;
sliderScroll($('#news ul li:nth-child(' + index + ')'));
index ++;
}, 5000);
replacing #news ul li to your appropriate selector.
I was recently working with scrollTo to implement a Coda-like slider wizard.
Here's the steps I took:
- Set a containing div to the dimensions I wanted the slider to appear as. overflow:auto; helps for testing, but you'll probably want to use overflow:hidden in the end.
- Inside that place another div, make it big enough to hold all your elements horizontally.
- Float the panels. give them explicit dimensions.
My CSS:
.scroller{
position: relative;
overflow: hidden;
height: 410px;
width: 787px;}
.modal-content{width: 3400px;}
.modal-content div{float:left; width:728px; height: 405px; padding: 0 30px;}
My JS:
function sliderScroll(target){
if(target.length <1)return false;
$(".current").removeClass("current");
target.addClass("current");
$(".scroller").scrollTo(target,500,{axis:'x'});
return false;
}
My HTML:
<div class="scroller">
<div class="modal-content">
<div>...</div>
...
</div>
</div>
来源:https://stackoverflow.com/questions/211111/jquery-scrollto-jquery-serialscroll-horizontal-scrolling