Use JQuery Cycle with custom Javascript

Question

I have build a view with a HTML-list were all my images are listed. Goal is to create a JQuery Cycle with those images, but for some reason, my custom Javascript isn't working...

Here is the HTML generated by Drupal:

<div class="homepage-slider">
  <ul>
    <li class="views-row views-row-1 views-row-odd -views-row-first>
      <div class="views-field views-field-field-front-slider-image">
        <div class="field-content">
          <img src="image.jpg" />
        </div>
      </div>
    </li>
    <li class="views-row views-row-2 views-row-even>
      <div class="views-field views-field-field-front-slider-image">
        <div class="field-content">
          <img src="image.jpg" />
        </div>
      </div>
    </li>
    <li class="views-row views-row-3 views-row-odd -views-row-last>
      <div class="views-field views-field-field-front-slider-image">
        <div class="field-content">
          <img src="image.jpg" />
        </div>
      </div>
    </li>
  </ul>
</div>

And here is my custom Javascript I wrote:

(function ($) {
    Drupal.behaviors.initFrontPageSlider = {
        attach: function(context, settings) {
            $('body').once('initFrontPageSlider', function() {
                $('.homepage-slider').cycle({
                    fx: 'fade' 
                });
            });
        }
    }
}(jQuery));

But for some reason, my image-list isn't picking up my javascript. What's missing on this?

Answer 1

If you want to cycle the <li>'s then you need to call .cycle() on the <ul> element. At the moment looks like you're trying to cycle the <ul> elements inside the <div class="homepage-slider">. If there's only 1 child element cycle doesn't progress further since there's nothing to cycle.

Answer 2

The jquery cycle needs to define the tag that the child is going to use this is set by defining data-cycle-slides="tag".

So in your example it should be data-cycle-slides="li"
This should be placed in the tag that wraps the li in this case it is ul so the ul should be <ul data-cycle-slides="li"> or you could place the slideshow class also within this like <ul class="homepage-slider" data-cycle-slides="li">

In the first case the it would be $('.homepage-slider ul').cycle({ and in the second case it should be $('.homepage-slider').cycle({

EDIT : This one is for cycle2 and might not be correct in the said question. I guess the as Clive mentioned $('.homepage-slider ul').cycle({` should be enough.

For reference