Can I do this with cycle()?
I have this code :
HTML
<div class='myDiv'>1</div>
<div class='myDiv'>2</div>
<div class='myDiv'>3</div>
<div class='myDiv' style='display:none'>4</div>
<div class='myDiv' style='display:none'>5</div>
CSS
.myDiv
{
width:50px;
height:50px;
line-height:50px;
border:2px solid #000000;
float:left;
text-align:center;
margin-right:10px;
}
jQuery
$('#myButton').click(function () {
});
开发者_运维技巧
and I'd like, when I click on MOVE
, to slide to the left the divs myDiv
.
So, if the start is 1 2 3
, clicking on MOVE
it must become 2 3 4
, than 3 4 5
and son on.
I'd like to do it with the .cycle()
plugins, but I don't know if I can setup a scroll-window
with it.
Is it possible? Or I need to implement my own jQuery/JS functions? (with fade/slide effect
, will be an hard work).
You can use carousel lite with scroll set to 1 visible set to 3
http://www.gmarwaha.com/jquery/jcarousellite/#doc
WORKING DEMO
$(document).ready(function() {
var galW = $('#gallery').width(),
my = $('.mydivs').length, // 3
mD = $('.myDiv').length, // 6
c = 1;
$('#slider').width(galW * my);
function a() {
$('#slider').animate({left: '-='+(galW/3)}, 800);
}
$('.btn').click(function() {
c++;
if(c===(mD-1)){
$('#slider').animate({left:0}, 800);
c=1; return;
}
a();
});
});
Or if you want - with PREV AND NEXT buttons:
WORKING DEMO 2
(You can find the basic tutorial HERE)
Happy coding!
精彩评论