<script type="text/javascript">(function($){//object containing margin settingsvar margins = {panel1: 0,panel2: -720,panel3: -1455,panel4: -2190,}//handle nav click$("#nav a").click(function(e){//stop browser defaulte.preventDefault();//remove on states for all nav links$("#nav a").removeClass("on");//add on state to selected nav link$(this).addClass("on");//set margin of slider to move$("#slider").animate({marginLeft: margins[$(this).attr("href").split("#")[1]]}); });//hide descriptive text$("#slider p").hide();//show descriptive text on mouseover (hide on mouseout)$("#slider img").hover(function() {$(this).next().slideDown();}, function() {$(this).next().slideUp();});})(jQuery);</script>
<div id="viewer"><div id="panels"><div id="slider"><div id="panel1"><img src="<?php bloginfo('template_url'); ?>/images/slider-2.png"></div><div id="panel2"><img src="<?php bloginfo('template_url'); ?>/images/slider-4.png"> </div><div id="panel3"><img src="<?php bloginfo('template_url'); ?>/images/slider-1.png"></div><div id="panel4"><img src="<?php bloginfo('template_url'); ?>/images/slider-3.png"></div></div></div><ul id="nav"><li class="thumb2"><a href="#panel1"><img src="<?php bloginfo('template_url'); ?>/images/web-rhino.png" /></a></li><li class="thumb4"><a href="#panel2"><img src="<?php bloginfo('template_url'); ?>/images/web-pelican.png" /></a></li> <li class="thumb1"><a href="#panel3"><img src="<?php bloginfo('template_url'); ?>/images/web-bee.png" /></a></li><li class="thumb3"><a href="#panel4"><img src="<?php bloginfo('template_url'); ?>/images/web-weasel.png" /></a></li></ul></div>
I'd like to it to automatically slide, can anyone tell me what code i need?
What you would need to do is write a function to move the slide to the next position
then call this function in a setInterval();
Can you update this http://jsfiddle.net/y7JD8/
Then we can work on a function form what you have
http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/