Изображение не скрывается правильно

Question

Я сделал карусель JQuery с нуля, пока код хороший, и он работает довольно хорошо.

Основная проблема заключается в том, что я пытаюсь использовать функцию fadeOut вместе с функцией fadeIn, стек изображений поверх друг друга.

Я не могу понять, как сделать их перекрывающимися.

Я попытался поиграть с абсолютным позиционированием, но не повезло.

Вы можете ясно видеть, когда вы идете на моем сайте http://techyhesh.com/Dogs/

HTML

<div class="carousel"> 

    <div id="background-slideshow"> 

     <div style="display: none;" id="img1" class="slides"> 
      <img src="/2015/03/Carosuel2.png"> 
      <div class="textblock"> 
       <p class="carousel-text1">Slider 1</p> 
       <p class="carousel-text2">His nose gets into everything</p> 
      </div> 
     </div> 
     <div style="display: block;" id="img2" class="slides"> 
      <img src="/2015/03/Carosuel.png"> 
      <div class="textblock"> 
       <p class="carousel-text1">Slider 2</p> 
       <p class="carousel-text2">His nose gets into everything</p> 
      </div> 
     </div> 
     <div style="display:none;" class="SlideJSON">2</div> 
    </div> 

</div> 

JS

jQuery(document).ready(function($) { 

var slides= $(".JSONNumber").html(); 

var slides= parseInt(slides); 

var animateInterval; 
var i = 1; 
var x = 2; 

function animate() { 


    $("#img" + i).fadeOut(2000) 
    $("#img" + x).fadeIn(2000); 


    if (i == slidenumber) { 

     $("#img1").fadeIn(2000); 

     i = 1; 
     x = 2; 

    } else { 
     i++; 
     x++; 
    } 

} 

animateInterval = setInterval(animate, 3000); 


}) 

Answer 1

В соответствии с вашим HTML, Селектор вы использовали неправильно.

$("#img" + i) 

Это должно быть

$("#slideimg" + i) 

Answer 2

в слайдах CSS, просто добавьте display: inline-block;