CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
Toby Cannon
Toby Cannon

Reputation: 735

JQuery Slider Moving Text

I am trying to use this JQuery slider on my website. The slides work fine, just as they should, however the issue i'm having is in the gap between the slides, where there is no picture there, all the text beneath jumps up towards the top of the page, then when the next slide is displayed, it obviously pushes it back down, is there a way so the text always stays in the same place, and does not get dragged up and down by the slideshow?

    function startSlides(start, end, delay) {
        setTimeout(slideshow(start,start,end, delay), delay);
    }
    function slideshow(frame, start, end, delay) {
        return (function() {
        $('#slideshow' + frame).fadeOut();
        if (frame == end) { frame = start; } else { frame += 1; }
        setTimeout(function(){$('#slideshow' + frame ).fadeIn();}, 850);
        setTimeout(slideshow(frame, start, end, delay), delay + 850);
    })
    }
    // usage: startSlides(first frame, end frame, delay time);
    startSlides(1, 3, 5000);
.slideshow{
	height:359px;
	width:1000px;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<div id="slideshow">
					
		<div id="slideshow1" class="slide">
			<div><img src="http://wallpaperrich.com/wp-content/uploads/2014/09/3d-animated-frog-image.jpg" alt="Slide 1"></div>
			</div>
			<div id="slideshow2" class="slide" style="display: none">
				<div><img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="Slide 1"></div>
			</div>
			<div id="slideshow3" class="slide" style="display: none">
				<div><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="Slide 1"></div>
			</div>
	</div>


<p>Bacon ipsum dolor amet tri-tip ribeye beef ribs chuck. Tail venison shank, cupim tongue pork loin beef ribs drumstick kevin ground round fatback. Boudin chicken andouille ham spare ribs fatback beef bresaola landjaeger frankfurter tongue. Hamburger fatback brisket flank. Pork loin kielbasa biltong tail pork chop pancetta bacon cow rump. Prosciutto pork loin cupim t-bone tongue shankle kielbasa, pastrami filet mignon ham jowl beef pork chop rump drumstick.</p>

Upvotes: 0

Views: 968

Answers (1)

pumpkinzzz
pumpkinzzz

Reputation: 2967

Change CSS 

.slideshow

to

#slideshow

you're applying CSS rules to a class named slideshow, but there isn't in your HTML. That is an ID

Upvotes: 1

Related Questions