Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Cycle plugin pager errors
    primarykey
    data
    text
    <p>I am attempting a single input of jquery Cycle to control 4 different cycles across the website. They have all got different ID tags, however, the pager control div appears 4 times. Here is my jquery:</p> <pre><code>$('#homeslide, #hairslide, #panamaslide, #chawtonsslide') .cycle({ fx: 'fade', speed: '1000', timeout: '8000', next: '#next', prev: '#prev', cleartypeNoBg: 'true', pager: '#controls' }); </code></pre> <p>HTML:</p> <pre><code>&lt;div id="banner-container"&gt; &lt;div id="prev"&gt;&lt;/div&gt; &lt;div id="next"&gt;&lt;/div&gt; &lt;div id="controls"&gt;&lt;/div&gt; &lt;div id="homeslide"&gt; &lt;img src="template/banner1.jpg" alt="Banner Image 1" /&gt; &lt;img src="template/banner2.jpg" alt="Banner Image 2" /&gt; &lt;img src="template/banner3.jpg" alt="Banner Image 3" /&gt; &lt;img src="template/banner4.jpg" alt="Banner Image 4" /&gt; &lt;img src="template/banner5.jpg" alt="Banner Image 5" /&gt; &lt;img src="template/banner6.jpg" alt="Banner Image 6" /&gt; &lt;img src="template/banner7.jpg" alt="Banner Image 7" /&gt; &lt;/div&gt; &lt;div id="hairslide"&gt; &lt;img src="template/banner2.jpg" alt="Banner Image 1" /&gt; &lt;img src="template/banner2.jpg" alt="Banner Image 2" /&gt; &lt;img src="template/banner3.jpg" alt="Banner Image 3" /&gt; &lt;img src="template/banner4.jpg" alt="Banner Image 4" /&gt; &lt;img src="template/banner5.jpg" alt="Banner Image 5" /&gt; &lt;img src="template/banner6.jpg" alt="Banner Image 6" /&gt; &lt;img src="template/banner7.jpg" alt="Banner Image 7" /&gt; &lt;/div&gt; &lt;div id="panamaslide"&gt; &lt;img src="template/banner2.jpg" alt="Banner Image 1" /&gt; &lt;img src="template/banner2.jpg" alt="Banner Image 2" /&gt; &lt;img src="template/banner3.jpg" alt="Banner Image 3" /&gt; &lt;img src="template/banner4.jpg" alt="Banner Image 4" /&gt; &lt;img src="template/banner5.jpg" alt="Banner Image 5" /&gt; &lt;img src="template/banner6.jpg" alt="Banner Image 6" /&gt; &lt;img src="template/banner7.jpg" alt="Banner Image 7" /&gt; &lt;/div&gt; &lt;div id="chawtonsslide"&gt; &lt;img src="template/banner2.jpg" alt="Banner Image 1" /&gt; &lt;img src="template/banner2.jpg" alt="Banner Image 2" /&gt; &lt;img src="template/banner3.jpg" alt="Banner Image 3" /&gt; &lt;img src="template/banner4.jpg" alt="Banner Image 4" /&gt; &lt;img src="template/banner5.jpg" alt="Banner Image 5" /&gt; &lt;img src="template/banner6.jpg" alt="Banner Image 6" /&gt; &lt;img src="template/banner7.jpg" alt="Banner Image 7" /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><img src="https://i.stack.imgur.com/8NIMH.jpg" alt="enter image description here"></p> <p>It works, apart from showing 4 pager divs. I was going to try a $.each count but as they all need IDs i dont think i can do that. Its worth noting that these different blocks of images are controlled via our CMS and only certain ones are shown per page. Example: home.htm shows #homeslide only</p> <p>Thanks guys</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload