Using jQuery cycle plugin to cycle through divs

jquery, jquery-cycle

Solution

You're just using the wrong selector, if you change

$('.slideshow')

to

$('.slider')

it should work: http://jsfiddle.net/cchana/kenWK/

Problem

I'm trying to cycle through a few divs that are generated dynamically through wordpress. The divs aren't cycling or sliding no matter what I try and I can't figure out why. The source code currently looks like this: ``` <div class="slider"> <div class="servicesslider"> <a href="link1"> <div class="slidertext"> <h1 class="sliderhead">Text1</h1> <p>Body copy</p> </div> <img width="450" height="270" src="imglink" class="attachment-front-page-services wp-post-image" alt="alt" title="title" /> </a> </div> <div class="servicesslider"> <a href="link2"> <div class="slidertext"> <h1 class="sliderhead">Text2</h1> <p>More body copy.</p> </div> <img width="450" height="270" src="imglink" class="attachment-front-page-services wp-post-image" alt="alt" title="title" /> </a> </div> ``` CSS: ``` .slider {width:1000px; height:400px; overflow:hidden; position:relative;} .servicesslider {width:900px; height:300px; padding:50px; overflow:hidden; float:left; position:absolute; background:red;} .servicesslider a {text-decoration:none;} .attachment-front-page-services {width:450px; height:270px; background:#fff; border:10px solid #fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow: 5px 5px 7px #4f4f4f;} .slidertext {font-family: Eurostyle; color:#ffffff; text-decoration:none; float:left; margin-right:20px; width:400px;} .sliderhead {font-size:50px;} .sliderhead a {color:#ffffff; text-decoration:none;} ``` jQuery (using the most simple version just to get anything happening) ``` <script type="text/javascript"> $(document).ready(function () { $('.slideshow').cycle({ fx: 'fade' }); }); </script> ``` jQuery is definitely loaded and I'm using this link to ensure that the cycle plugin is loaded correctly ``` <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> ``` !!!!!!!!!! * SOLVED * !!!!!!!!!! There was a jQuery conflict within wordpress. It had two versions of jQuery running simultaneously

Original source