JQuery изображения увядают разве работает

Question

Привет я написал некоторые JQuery, но по какой-то причине замирания разве работает

$(document).ready(function() { 

    var img_array = [1, 2, 3, 4], 
     newIndex = 0, 
     index = 0, 
     interval = 7500; 

    (function changeBg() { 


     // newIndex = Math.floor(Math.random() * 10) % img_array.length; 
     // index = (newIndex === index) ? newIndex -1 : newIndex; 

     index = (index + 1) % img_array.length; 

     $('.main-wrapper').css('backgroundImage', function() { 
      $('#cycler').fadeIn({ 
       backgroundColor: 'transparent' 
      }, 0, function() { 
       setTimeout(function() { 
        $('#cycler').fadeToggle({ 
         backgroundImage: 'url(http://dev.test.co.uk/Content/H/images/bg1.png)' 
        }, 2500); 
       }, 4000); 
      }); 
      return 'url(http://dev.test.co.uk/Content/H/images/bg' + img_array[index] + '.png)'; 
     }); 
     setTimeout(changeBg, interval); 
    })(); 
}); 

кто-то может пролить некоторый свет на это, пожалуйста,

HTML только на самом деле это Theres некоторое содержание в средний, но только часть текста

<section id="cycler" class="main-wrapper"></section> 

и КСС:

#cycler{ 
    position:relative; 
} 

#cycler img{ 
    z-index:1 
} 

#cycler img.active{ 
    z-index:3 
} 

.main-wrapper 
{  
    overflow-x: auto; 
    margin-left: auto; 
    margin-right: auto; 
    height: 1822px;  
    background-image: url(../H/images/bgone.png); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

любая помощь хороша

Благодаря

Answer 1

Tim лучше в эти дни, чтобы использовать CSS3 и HTML с начальной загрузки может быть?

<div class="carousel-wrapper"> 
    <!-- Header Carousel --> 
    <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> 
    <div class="carousel-inner"> 
     <div class="active item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
    </div> 
</div> 

CSS

.carousel-fade .carousel-inner .item 
{ 
    opacity: 0; 
    transition-property: opacity; 
} 
.carousel-fade .carousel-inner .active 
{ 
    opacity: 1; 
} 
.carousel-fade .carousel-inner .active.left, 
.carousel-fade .carousel-inner .active.right 
{ 
    left: 0; 
    opacity: 0; 
    z-index: 1; 
} 
.carousel-fade .carousel-inner .next.left, 
.carousel-fade .carousel-inner .prev.right 
{ 
    opacity: 1; 
} 
.carousel-fade .carousel-control 
{ 
    z-index: 2; 
} 

.carousel-wrapper 
{ 
width: 100%; 
background-color: #000000; 
} 
/* html, 
body, */ 
.carousel, 
.carousel-inner, 
.carousel-inner .item 
{ 
    min-width: 1200px; 
    max-width: 1200px; 
    min-height: 512px; 
    max-height: 512px; 
    margin-right: auto; 
    margin-left: auto; 
} 


.item:nth-child(1) 
{ 
    background-image: url('image0.png'); 
} 

.item:nth-child(2) 
{ 
    background-image: url('image1.png'); 
} 

.item:nth-child(3) 
{ 
    background-image: url('image2.png'); 
} 

.item:nth-child(4) 
{ 
    background-image: url('image3.png'); 
} 

JQuery

$('.carousel').carousel({ 
    interval: 5000 //changes the speed 
}) 

Надеется, что это помогает