i trying create content slider website. slider canvas area can show 3 items @ time, while there may 4 or more items.
please see jsfiddle: http://jsfiddle.net/qduvw/
(you'll want widen display section @ least 1000px)
in mind, way works this....
have first 3 items visible. remaining items hidden (due overflow), off right of first 3 (visible) items.
when user clicks "next" animating items left 338 pixels (the width of individual items). once animation done, locating first item (which off-screen left), , moving end. doing both .animate() .appendto. ensures visibly @ end, @ end of dom structure.
when use clicks "previous" before anything grabbing last item, , moving first position (both .animate() , prependto()) , performing animation of items right, new first item in place before animation.
however...
when click next few times, seems work ok.. if reload , click prev few times.. works ok.. when click combination of 2 buttons, strange things start happen , not sure why. items seem moving out of turn , wrong locations.
i having hard time finding issue here. advice appreciated!!
css
body{background:#000;} #poster_holder{ margin-top:5px; overflow:hidden; position:relative; height: 500px; width:1000px; } #poster_holder #shade_left{ width:49px; height:510px; top:0; left:0; position:absolute; background:url(http://s10.postimg.org/km0bl8let/shade_left.png?nocache=1373557653) repeat-y; z-index:990; cursor:pointer; } #poster_holder #shade_right{ width:49px; height:510px; top:0; right:0; position:absolute; background:url(http://s10.postimg.org/d4r460vvp/shade_right.png?nocache=1373557653) repeat-y; z-index:990; cursor:pointer; } #poster_holder #shade_left .arrow, #poster_holder #shade_right .arrow{ margin-top: 200px; text-align:center; color:#fff; } #poster_holder #shade_left:hover .arrow, #poster_holder #shade_right:hover .arrow{ } #poster_slider{ width:1400px; height:500px; position:absolute; z-index:900; overflow:hidden; } #poster_holder .item{ height:500px; width:323px; position:absolute; top:0; cursor:pointer; } #poster_holder .item:last-child{ margin-right:0px !important; } js
$('#shade_right').click(function(e){ //next $('#poster_holder .item').animate( {left: '-=338'}, function(){ var = $('#poster_holder .item:first'); var x = $('#poster_holder .item:last').position().left + 338; i.animate({'left':x+'px'},1).appendto('#poster_slider'); } ); }); $('#shade_left').click(function(e){ //prev var = $('#poster_holder .item:last'); i.prependto('#poster_slider').animate({'left':'-338px'},1); $('#poster_holder .item').animate({ left: '+=338' }); }); html
<div id="poster_holder"> <div id="poster_slider"> <div class="item" id="item-1" style="left:0px;background:#ff0;"></div> <div class="item" id="item-2" style="left:338px;background:#0ff;"></div> <div class="item" id="item-3" style="left:676px;background:#f0f;"></div> <div class="item" id="item-4" style="left:1014px;background:#00f;"></div> </div> <!-- black gradient left & prev button --> <div id="shade_left"><div class="arrow"><img src="http://s11.postimg.org/5ttem5r0f/arrow_prev.png?nocache=1373557626" /></div></div> <!-- black gradient right & next button --> <div id="shade_right"><div class="arrow"><img src="http://s21.postimg.org/bdyks7rwj/arrow_next.png?nocache=1373557551" /></div></div> </div>
i found culprit! when clicking next, callback being called 4 times - 1 each animated item. had change next procedure ensure called once @ end.
$('#shade_right').click(function(e){ //next $('.posteritem') .animate({left: '-=338'}) .promise() .done(function(){ var firstitem = $('.posteritem:first'); var pos = $('.posteritem:last').position().left + 338; firstitem.animate({'left':pos+'px'},1).appendto('#poster_slider'); }) }); 
Comments
Post a Comment