jQuery images fade isnt working

Question

Hi I have wrote some jQuery but for some reason the fading isnt working

$(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);
    })();
});

can someone shed some light on this please

HTML is only really this theres some content in the middle but just some text

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

and css is:

#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;
}

any help is good

Thanks

Answer 1

Tim it is best these days to use css3 and html with bootstrap maybe ?

<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
})

Hope this helps