Home/ Questions/Q 8546003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T12:55:08+00:00

I want to make several (more than 12) slideshows on one page, which will

  • 0

I want to make several (more than 12) slideshows on one page, which will animate on mouse hover. Right now only first div is animated. Here’s my code:

jQuery:

$(document).ready(function() {
  $('#reference').each(function() {
    $(this).cycle({
      speed:      200, 
      //timeout:     0, 
      fx:     'fade',
    });
  });
});

HTML:

<div class="columns-3">
    <div class="column firstCol">
        <div class="columns-3-Content">
            <div id="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="columns-3-Content">
            <div id="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column lastCol">
        <div class="columns-3-Content">
            <div id="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
</div>
<div style="clear:both;"></div>

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you should pass a class and not a unique div ID.
    jQuery:

    $(document).ready(function() {
  $('.reference').each(function() {
    $(this).cycle({
      speed:      200, 
      //timeout:     0, 
      fx:     'fade',
    });
  });
});

    edit (by and thanks to Gerald Schneider 🙂 ):

    you can also do this:

    $('.reference').cycle({ speed: 200, fx: 'fade' });

    HTML:

    <div class="columns-3">
    <div class="column firstCol">
        <div class="columns-3-Content">
            <div class="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="columns-3-Content">
            <div class="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column lastCol">
        <div class="columns-3-Content">
            <div class="reference">
                <img src="images/img1.png" />
                    <img src="images/img2.png" />
            </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
    • 0