CODEWITHSUNDEEP
javascriptjquerycss
Krii
Krii

Reputation: 907

JQuery slideshow glitching

Can someone tell me what is wrong with this slider? When I execute it, the script works for the first two slides and then glitches.

css:

.slider {
    z-index: 0;
    clear: both;
    position: relative; 
    margin: 0 0 15px 0;
    height: 275px;
}
.slider .jumbo {
    z-index: 0;
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 10px;
}

jquery:

$(".slider > .jumbo:gt(0)").hide();
setInterval(function() { 
$('.slider > .jumbo:first')
    .show("slide",1000)
    .next()
    .hide(0)
    .end()
    .appendTo('.slider');
},  2000);

Webpage (slid show sped up for question): http://awkwardpetsiblings.x10host.com/

Upvotes: 1

Views: 46

Answers (1)

CupawnTae
CupawnTae

Reputation: 14580

When you start the animation, jQuery UI is wrapping your slide in a div as part of its animation process. Your code then immediately moves your slide out of the wrapper, and jQuery UI gets confused, leaving behind a trail of wrapper divs as the interval repeats.

If instead you start the animation after you move the element, it works as intended. Live example:

$(".slider > .jumbo:gt(0)").hide();
setInterval(function() { 
  $('.slider > .jumbo:first')
	.next()
	.hide()
	.end()
	.appendTo(".slider")
	.show("slide",500)
    ;
},1000);
$("#nv-cntnr-tab1").click(function(){window.open("/","_self")});
.jumbo {position:absolute; top:0;left:0;background:white;width:100%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="slider">
	
	<div class="jumbo slide1">
		<div class="cover" id="sld1-cover"></div>
		<div class="container" id="sld1-container">
			<div class="desc" id="sld1-cntnr-desc">
				<h2>For Sharing your awkward and funny pet pictures.</h2>
				<h4>See what it's all about by trying our interactive tour.</h4>
			</div>
			<div class="nav" id="sld1-cntnr-nav">
				<div class="tour btn" id="sld1-cntnr-nav-tour_btn">
					Let's Get Started
				</div>
			</div>
		</div>
	</div>
  <div class="jumbo slide2" style="display: none;">
		<div class="cover" id="sld2-cover"></div>
		<div class="container" id="sld2-container">
			<div class="desc" id="sld2-cntnr-desc">
				<h2>The Feed. It's what we live on.</h2>
				<h4>Try it out for free. No account needed.</h4>
			</div>
			<div class="nav" id="sld2-cntnr-nav">
				<div class="signup btn" id="sld2-cntnr-nav-signup_btn">
					Visit The Feed
				</div>
			</div>
		</div>
	</div>
	<div class="jumbo slide3" style="display: none;">
		<div class="cover" id="sld3-cover"></div>
		<div class="container" id="sld3-container">
			<div class="desc" id="sld3-cntnr-desc">
				<h2>Take your experience to the next level.</h2>
				<h4>Personalize your profile and Feed with friends.</h4>
			</div>
			<div class="nav" id="sld3-cntnr-nav">
				<div class="feed btn" id="sld3-cntnr-nav-feed_btn">
					Create Your Account
				</div>
			</div>
		</div>
	</div>
</div>

Upvotes: 1

Related Questions