javascript - jQuery Image Crossfade not working -

hello wrong our jquery image crossfade set-up!? http://tips.techmatemn.com/

html

<div class="hero-cycler">     <img class="active" alt="tips qualified client 1" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/hero-bk-1.jpg">     <img alt="tips qualified client 2" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/hero-bk-2.jpg"> </div> 

css

.hero-cycler{position:relative;} .hero-cycler img{position:absolute;z-index:1} .hero-cycler img.active{z-index:3} 

script

<script> // homepage client images function cycleimages(){       var $active = $('.hero-cycler .active');       var $next = ($active.next().length > 0) ? $active.next() : $('.hero-cycler img:first');       $next.css('z-index',2);//move next image pile       $active.fadeout(1500,function(){//fade out top image       $active.css('z-index',1).show().removeclass('active');//reset z-index , unhide image           $next.css('z-index',3).addclass('active');//make next image top 1       });     }  $(document).ready(function(){ // run every 7s setinterval('cycleimages()', 7000); }) </script> 

thanks!

change way call function. setinterval uses string parameter depreciated , not recommended. use standard method shown below correctly run function.

change setinterval('cycleimages()', 7000); setinterval(cycleimages, 7000);

full working copy generic filler images:

function cycleimages() {    var $active = $('.hero-cycler .active');    var $next = ($active.next().length > 0) ? $active.next() : $('.hero-cycler img:first');    $next.css('z-index', 2); //move next image pile    $active.fadeout(1500, function() { //fade out top image      $active.css('z-index', 1).show().removeclass('active'); //reset z-index , unhide image      $next.css('z-index', 3).addclass('active'); //make next image top 1    });  }    $(document).ready(function() {    // run every 7s    setinterval(cycleimages, 7000);  })

.hero-cycler {    position: relative;  }  .hero-cycler img {    position: absolute;    z-index: 1  }  .hero-cycler img.active {    z-index: 3  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="hero-cycler">    <img class="active" alt="tips qualified client 1" src="https://unsplash.it/300/200/?image=0">    <img alt="tips qualified client 2" src="https://unsplash.it/300/200/?image=1">  </div>

(a quick check of browser console have shown error: uncaught referenceerror: cycleimages not defined have been helpful include in question)