javascript - jQuery Slider that fades and slide at same time -
i've been trying find jquery slider fades , slide @ same time no sucess far, i've decided try , create own. well, far, i've managed make slide , barely fade, barely mean in bigger screens might content blinking.
this html:
<div id="slider"> <div class="slide"> <h1>a phrase</h1> </div> <div class="slide"> <h1>a phrase</h1> </div> <div class="slide"> <h1>a phrase</h1> </div> </div> this jquery:
var slider = $('#slider .slide'), winwidth = $(window).width(); slider.css({ width: winwidth }); $(window).resize(function(){ winwidth = $(window).width(); $(args).css({ width: winwidth }); }); var slidew = slider.width(), slidesqty = slider.length, sliderfullw = slidesqty * slidew, slidemvcheck = winwidth/2; $('#slider').css({ width: sliderfullw }); function cycleslides(){ $('#slider').animate({ left: -winwidth }, {duration: 2000, queue: false}).fadeout(700).fadein(2000, function(){ $('#slider .slide:first-child').appendto('#slider'); $('#slider').css({left: 0}); }); } var autoslide = setinterval(function () { cycleslides(); }, 4000); i need tweaking code, i've tried lot of different things in past 2 days, i've ran out of ideas , i'm not jquery.
so had crack @ anyway (see comments) , made :
http://codepen.io/anon/pen/mjybgj?editors=011
var gate = $(window); var slider = $('#slider'); var slide = $('.slide'); var winwidth = gate.width(); slide.css({width: winwidth}); gate.resize(function() { winwidth = gate.width(); slide.css({width: winwidth}); }); var slidew = slide.width(), slidesqty = slide.length, sliderfullw = slidesqty*slidew, slidemvcheck = winwidth/2; slider.css({width: sliderfullw}); function cycleslides() { $('.slide').eq(0).animate({opacity: 0}, 700); $('.slide').eq(1).delay(700).animate({opacity: 1}, 2000); slider.animate({left: -winwidth}, 2000, function() { $('.slide').eq(0).appendto(slider); slider.css({left: 0}); }); } var autoslide = setinterval(function() { cycleslides(); }, 4000); the tricky thing using fade hide element when opacity zero, taking out of (and interfering with) document flow. i've made opacity animation (keeping physical dimensions intact). hope that's closer intended. added bit of css set opacity first visible slide :
.slide:not(:first-of-type) { opacity: 0; }
Comments
Post a Comment