Broken Slick Slider

[tdrsam]

I cannot figure out why my slider won't run. I had it working fine, then I tried to make it scroll vertically rather than horizontally and now it's broken, even though I've reset all the settings to standard.

This is the HTML:

<div class="carousel">
<div><img src="images/slider/worlds.png" alt="" width="200" height="140"></div>
<div><img src="images/slider/gonz2.png" alt="" width="200" height="140"> </div>
</div>
<aside class="slider-frame"></aside>
 

I have the slick folder in my application tree and I have the CSS and JS linked. The CSS is in the head section like so:

/* Main Site Stylesheet */
<link rel="stylesheet" type="text/css" href="css.css" />
/* Slick Stylesheet */
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
 

JS linked in the head section (I've tried putting this in the footer as well):

// jQuery
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
// Main Site JS
<script type="text/javascript" src="js/ur-js.js"></script>
 

JS in the footer:

<script type="text/javascript" src="slick/slick.min.js"></script>
 

Main JS File:

 $(document).ready(function(){
  $('.carousel').slick({
  autoplay:true,
  autoplaySpeed:45,
  arrows:false,
  dots:false,
  infinite:true,
  pauseOnHover: false
  });
});
 

Some conflicts could be the Facebook Page Plugin (removed all code - did nothing) or Google Maps (not even on the same page of the site). No errors in dev tools console, nothing showing in sources debugging, however it's running in the background. It's just that the images on the screen don't change. When I check the code in the Chrome Dev Tools, the active image is changing in the html list of images. It seems to be using the correct timing as per the settings too, but it's just stuck on the initial image in the actual site window.