Using jQuery cycle plugin to cycle through divs

Question

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

Here is a jsfiddle: http://jsfiddle.net/ It's working on there but not on my site? I'm looking into possible conflicts. — James, May 14 '12 at 12:09

score 4 · Accepted Answer · answered May 14 '12 at 11:48

4

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

$('.slideshow')

to

$('.slider')

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

answered May 14 '12 at 11:48

cchana

4,899
3
33
43

Yeah sorry I copied the source code wrong - the using $('.slider') doesn't work. – James May 14 '12 at 11:50

Bruno · Answer 2 · 2014-05-04T00:24:09.317

0

You're referring to the wrong selector in the Jquery selector.

<script type="text/javascript">
    $(document).ready(function () {
        $('.slider').cycle({
            fx: 'fade'
        });
    });
</script>

This should do it.

And don't forget to close the first div you started with a tag. Your snippet doesn't show it.

edited May 04 '14 at 00:24

answered Mar 06 '14 at 15:28

Bruno

401
5
13

Using jQuery cycle plugin to cycle through divs

2 Answers2