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:
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:
JS linked in the head section (I've tried putting this in the footer as well):
JS in the footer:
Main JS File:
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.
This is the HTML:
Code:
<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>
Code:
/* Main Site Stylesheet */ <link rel="stylesheet" type="text/css" href="css.css" /> /* Slick Stylesheet */ <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
Code:
// 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>
Code:
<script type="text/javascript" src="slick/slick.min.js"></script>
Code:
$(document).ready(function(){
$('.carousel').slick({
autoplay:true,
autoplaySpeed:45,
arrows:false,
dots:false,
infinite:true,
pauseOnHover: false
});
});