2015-01-21 4 views
0

Я пытаюсь использовать этот слайдер JQuery на своем веб-сайте. Слайды работают отлично, как и должно быть, однако проблема, с которой я сталкиваюсь, заключается в разрыве между слайдами, где нет изображения, весь текст под ним подпрыгивает вверх к верхней части страницы, а затем, когда следующий слайд , он явно отталкивает его назад, есть ли способ, чтобы текст всегда оставался в одном месте и не перетаскивался вверх и вниз по слайд-шоу?JQuery Slider Перемещение текста

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{ 
 
\t height:359px; 
 
\t width:1000px; 
 
\t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
\t <div id="slideshow"> 
 
\t \t \t \t \t 
 
\t \t <div id="slideshow1" class="slide"> 
 
\t \t \t <div><img src="http://wallpaperrich.com/wp-content/uploads/2014/09/3d-animated-frog-image.jpg" alt="Slide 1"></div> 
 
\t \t \t </div> 
 
\t \t \t <div id="slideshow2" class="slide" style="display: none"> 
 
\t \t \t \t <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> 
 
\t \t \t </div> 
 
\t \t \t <div id="slideshow3" class="slide" style="display: none"> 
 
\t \t \t \t <div><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="Slide 1"></div> 
 
\t \t \t </div> 
 
\t </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>

ответ

1

Изменение CSS

.slideshow 

в

#slideshow 

вы применяете правила CSS к классу имени слайд-шоу, но не в вашем HTML , Это ID

+0

ahh, чувствуйте себя как правая маппет! Спасибо, что указали, что нет –

+0

проблем нет. вы можете проверить это как правильный ответ, если все в порядке – pumpkinzzz

Смежные вопросы