Hello,

It seems that the first slide shown is not triggering the cycle-before event.

I know we have the cycle-initialized event, but I would suggest to call cycle-before even for the first slide so that we can bind an event to the first element without any tricks.

If this is the expected behavior, it would be very useful to have a "cycle-will-start" where, one of the parameters, is the first slide in the list.

Here is a code example in which I did need to use the jQuery ":first" selector to bind an event to the first slide:

$.each(slides, function(i, promo_slide) {
  url = baseUrl() + 'uploads/promos/' + promo_slide.mobile_image;
  content  = '<img data-promo="' + promo_slide.id + '" class="promo_slide" src="' + url +'"/>';
  $('.cycle-slideshow').cycle('add', content);
});

// Here I needed to use the ":first" selector
$('.cycle-slideshow .promo_slide:first').unbind('click');
  $('.cycle-slideshow .promo_slide:first').click(function(e) {
     e.preventDefault();
      window.localStorage.setItem('view_promo_by_id', $(this).data('promo'));
      changePage("detalhe_promocao.html");
  });

  $('.cycle-slideshow').on('cycle-before', function(e, opts, outs, ins) {
      $(ins).unbind('click');
      $(outs).unbind('click');
      $(ins).click(function(f) {
        f.preventDefault();
        window.localStorage.setItem('view_promo_by_id', $(this).data('promo'));
        changePage("detalhe_promocao.html");
      });
   });

Hello

Is there currently a way to have slides containing various HTML to progressively load images contained within the HTML? It would be good not to have to include all the HTML in JSON, but only the images.

Example markup

<li>
    <h3>Slide 1</h3>
    <p>Some Text</p>
    <div id="img-1" class="img-wrap"></div>
</li>
<li>
    <h3>Slide 2</h3>
    <p>Some Text</p>
    <div id="img-2" class="img-wrap"></div>
</li>

Example JSON

[
    { "img-wrap":"#img-1" , "img-src":"images/img-1.jpg" },
    { "img-wrap":"#img-2" , "img-src":"images/img-2.jpg" }
] 

Thanks for a great V2 of the cycle plugin.

When setting up centerVert programatically, I have to use the work-around of triggering resize on the window or the image won't center.
After triggering (or manually resizing the window ofc) everything is fine.
in combination with autoHeight:'calc' this really is what most other sliders are missing! nice job!

$(document).ready(function() {
    $('#someslideshow').cycle({
        centerVert: true
    });
    //workaround: 
    $(window).trigger('resize');
});

I suppose the differents betwen prod and devel on download page should by only "compression" of code. If not this Issues is pointless

Anyway, if I use prod version you cant use command destroy i got this error:
[cycle2] cycle-stopped jquery.cycle2.js (line 500) TypeError: this.opts is not a function

If I use devel version, everting works fine

(btw, i append plugin into main file,...)

Greetings from Czech, E

This code works in cycle1 but not in cycle2.

$(this).parent('.element').find('.slides').cycle({

        fx:      'scrollHorz',

         timeout:  0,

         manualTrump:   false,

next: $(this).parent('.element').find('.next'),

prev: $(this).parent('.element').find('.prev'),

});

images is in LI elements.

Firebug says

"TypeError: opts is undefined
[Break On This Error]

if ( opts.slideCount < 2 ) {"

And with .min

"TypeError: c is undefined
[Break On This Error]

...(document).on("cycle-destroyed",function(b,c){c._sentinel&&c._sentinel.remove(),..."

I build my interesting simple site http://www.mytintin.1866.co recently.
I use your graceful cycle2 plugin, it's a great job.
When I use tile effect, I find a strange issue:

/* code snippet */
$('div#photoContainer').cycle({fx: 'tileBlind'});
$('div#photoContainer').cycle('resume');

$('#destroyButton').click(function(){
$('div#photoContainer').cycle('destroy');
});
/* end of code snippet */

The "destroy" command will issue error message in console:
Uncaught TypeError: Object # has no method 'opts'

I explore the jquery.cycle2.tile.js(version: BETA-20120910)
onDestroy: function( e ) {
var opts = this.opts();
opts.container.find('.cycle-tiles-container').remove();
}
I print the this keyword, it is the opts.container itself!
I modify the code as follow:
onDestroy: function( e ) {
$(this).find('.cycle-tiles-container').remove();
}
Then the error will never occur.
Expect for your verification.
Thanks!

I use this carousel:

                    <div class="azz"
                        data-cycle-fx="carousel"
                        data-cycle-timeout="0"
                        data-cycle-carousel-visible="3"
                        data-cycle-carousel-fluid="true"
                        data-cycle-prev=".prev"
                        data-cycle-next=".next"
                        data-cycle-log="false"
                        data-cycle-slides="> a > img"
                        >
                        <a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
                            <img alt="" src="http://placehold.it/130x130" />
                        </a>
                        <a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
                            <img alt="" src="http://placehold.it/130x130/ff0000" />
                        </a>
                        <a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
                            <img alt="" src="http://placehold.it/130x130/eeeeee" />
                        </a>
                        <a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
                            <img alt="" src="http://placehold.it/130x130" />
                        </a>
                        <a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
                            <img alt="" src="http://placehold.it/130x130/333333" />
                        </a>
                        <a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
                            <img alt="" src="http://placehold.it/130x130/bbbbbb" />
                        </a>
                    </div>
                </div>

...could there be an option for scolling through all slides in the middle?

Eg. I'm on the first slide, then I'll click to go to 4th slide, when it would slide through slides 2 and 3.

br, Marko

im trying to fix a carousel banner with your plugin like jcarousel.

but i have some problems,

1. cycle-carousel-wrap element does not take width so when i press next the new element appiars with a delay in the end of animation.
2. autoheigh calc doesnot take the maximum height of the slides
3. if slides are divs if i dont put float left in elements seens broken and not in a line.

http://jsfiddle.net/Fyyrv/3/

Hi Mike,

i'd be great if you either commented the dev versions of the FXs, or put some docs up on howto modifiy or create custom FXs.. i finally moded scrollVert to my likings, but it took me some try & error poking, since on first sight it's rather blurry what's going on ;)

Other than that: i do like C2 a lot.. cudos! It just saved me from a nasty bug C1 threw in Safari.

btw: i was thinking about how i could actually pass options to a FX rather than hacking it.. i wondered if additional data-* attributes would make sense, or something else.. do you have something up your sleve allready?

cheers,
Jan

Awesome plugin! I've been a long time fan since version 1.

Is there a preferred method to specify the number of slides to advance in a carousel?

I tried overriding the advanceSlide function in order to create functionality to skip forward and backward over multiple images in my carousel. But things don't seem to work as expected.

I have a slidehow where the images (coming out of wordpress) are limited in height, rather than width.
On mobile devices, the usual max-width & height = auto approach is used, and so I need to set height for sentinel by using auto-height = calc.

However, the picture picked seems not right.

        if ( autoHeight === 'calc' ) {
            // calculate tallest slide index
            opts.slides.each(function(i) {
                var h = $(this).height();
                if ( h > max ) {
                    max = h;
                    autoHeight = i;
                }
            });
        }

It's clear to see that you only compare for height, and not for ratio.

I'm working on a solution and will post an update.

Go to http://jquery.malsup.com/cycle2/demo/carousel.php Non-Circular Demo and click Next four times while at the end of the slides. Now click Prev. It won't go back until you click Prev four times.

The problem: currSlide advances beyond slideCount + carouselVisible and causes unexpected behavior.

My fix (applied outside of the library) modified from jquery.cycle2.js line 696:

var c2 = $.fn.cycle;
$.extend( c2.API, {
    next: function() {
        var opts = this.opts();
        var count = opts.reverse ? -1 : 1;
        if ( opts.allowWrap === false && ( opts.currSlide + count ) > opts.slideCount - opts.carouselVisible )
            return;
        opts.API.advanceSlide( count );
        opts.API.trigger('cycle-next', [ opts ]).log('cycle-next');
    }
});

Notice == changed to > and - opts.carouselVisible added.

Move the assignation of the active class to when the transition starts. At the moment the active class becomes assigned after the the transition has completed – which can look not so smooth.

I have a carousel nav that controls a slideshow and when an item in the carousel is clicked I think the user will expect the state to change then not when the transition has completed.

I looked at the code, but I couldn't seem to switch the order of opts.API.updateView(); without breaking the active class totally.

I hope that makes sense?

Many thanks,
Shaun

Hey Mike! First of all, great stuff on Cycle 2.. it's really an upgrade! Thanks for that!

I'm experiencing a bug with the slider not running the Before and After callbacks on the first slide. It's just happening on the first time the first slide appears and afterwards they are running as usual. So it's just happening on the very first slide.

Any clue on what to modify to solve that?

P.S. Functions are binded on "on" as in the documentation and called on document.ready.

hy,
would it be possible to add keyboard navigation to the cycle plugin?
So you can switch through the i mages by using the keyboard keys.

In my last project, i added it manually:

//gallery keyboard evetns
    $(document.documentElement).keyup(function (event) {
      if (event.keyCode == 37){
        $('.slider').cycle('prev');
      }else if (event.keyCode == 39){
        $('.slider').cycle('next')
      }
    });

My slides are made up of a div that contains an image and some text, and when they transition using horizontal scrolling, the text of each slide is overlapping the text of the slide coming in from the right.

http://jsfiddle.net/fk3BZ/1/

Any thoughts? I can't apply a width to the slide because it's being used in a responsive layout.

in some cases if text would normally wrap in a slideshow element, it overflows insiead of wrapping, if carusel is used.
see:
http://dl.dropbox.com/u/4130873/it-modalrnd2b.html
the text wraps normally if carousel is disabled in this slideshow
testedin ff and ie.
here is an anything-slider version of the page, to illustrate what i'm trying to do:
http://dl.dropbox.com/u/4130873/it-modalrnd-as.html

You can see the especially when using window.resize() on a destroyed cycle, as it's still trying to calculate the center.

I really, really like your cycle2 plugin for all my mobile sliders.
But the sentinel slide can cause several problems, if a pane or some of its children have an id. So this id is doubled when a sentinel slide is created which leads to incorrect results when using document.getElementById or (inQuery) $('#id'). It only returns the first (= the one in the sentinel) element.
The only solution right now is not to use a dynamic height (so no sentinel slide is created), but I would like to use auto-height="calc" AND ids.

Hi, I need use currentslide and maxslide in my javascript, but I don't know how I do this.

Thanks.

Hello,
Which browsers are supported (IE) ?
thx

http://www.dietersteinbach.com/kunden/faces-in-studio/

I've sometimes had a bug now, which can be more or less reproduced:

• open http://www.dietersteinbach.com/kunden/faces-in-studio/ on iPhone 4S (in my case)
• swipe wildly left and right

After a while, two images are visible at the same time: http://imgur.com/tnMju
furthermore, the controls (next / prev) are one step behind.

Just an idea - maybe swiping too fast causes the issue? Like if you start the next swipe even before the previous one has properly executed the slide transition?

Hi.

In my Cycle2 Slideshow, the second slide is the longest one. So because cycle 2 determines the height based on the first slide, the second one gets cut off.

Is it possible to determine the height based on the longest slide, no matter if its first, second or what ever?

Thank you.

(I didn't see any other mention of this but it may already have been addressed as I imagine it would be a popular feature.)

I don't see an option to display slides in random order. I was able to use an extra bit of jQuery to randomize the slide elements before the slideshow begins, but are there plans to include a random option as in the original Cycle?

Thank you for the continued development of all your plugins, particularly these simple and flexible rotators! Cycle2 is great!

Hi Malsup,

Firstly I would like to thank you for your continued work. Cycle has always been my slideshow plugin of choice and the release of cycle2 is really a dream come true!

I was wondering why using data-cycle-hash on the slides cause the autoplay to not work?

For the original cycle - I used hash change with functions such as:
onPagerEvent: function (idx, slide) {
hasSlid = 1;
window.location.hash = $(slide).data('title');
return false;
}

Is there anything that would similarly work?

Many thanks in advance!

I use the "Default Slideshow" with some configurations:

jquery.cycle2.min.js (BETA-20120923)
jquery.cycle2.tile.min.js (BETA-20120923)

<ul class="cycle-slideshow" 
    data-cycle-timeout="5000"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="500"
    data-cycle-slides="> li"
    data-cycle-fx="tileSlide"
    >
        <li> <img src="image1.png" alt="" /></li>                   
        <li> <a href="/lorem/"><img src="image2.png" alt="" /></a></li>
        <li> <a href="/ipsum"><img src="image3.png" alt="" /></a></li>              
</ul>

And i see those console.log's:
[cycle2] --c2 init--
[cycle2] fx: tileSlide (string)
[cycle2] slides: > li (string)
[cycle2] speed: 500 (number)
[cycle2] pauseOnHover: true (boolean)
[cycle2] timeout: 5000 (number)

can i disable that?

if i'm in development, its cool - but if i go live with a project, would be good i could disable it.

Hi,

I tried to listen to 'cycle-initialized' (and then to any of initialization event) but they aren't called.

Events like cycle-resumed, cycle-before, cycle-update-view etc. are working.
No luck with cycle-initialized or any of the initialization events.

I'm using this URL for testing.
http://malsup.github.com/jquery.cycle2.js

Hi,

I used carousel plugin and bookmarking stopped working. When I remove carousel, bookmarking starts working again.

I detected when I reload the page with hash. When using carousel, slide with that hash did not load. Only the first slide. After this all slide changes went to wrong slide.

I had the latest production versions.

br, Marko

I'm putting together my first slideshow with Cycle2 and I already need pagers & progressive loading. I don't know if this constitutes an uproar, but I can imagine using this quite a bit. I have a workaround where I swap out a placeholder gif with the main image, but it would be really cool if Cycle2 supported this natively! :-)

http://jquery.malsup.com/cycle2/demo/progressive.php

If you use pause-on-hover and have navigation buttons that are outside of the main 'cycle-slideshow' div, the slideshow does not pause when the buttons are hovered.

Hi malsup,

I was using $(el).cycle('add', newSlide) and the one thing I'm missing right now is adding slide after specific index, similar functionally you have right now with removing slide by zero-based index.

What would be the best way to go about that?

Cheers!

The following three problems occur when opts.carouselVisible > opts.slideCount and cause unexpected results when there are fewer slides to display than "slots" to display them in.

In cycle.transitions.carousel.postInit() line 47 opts.carouselVisible is set to opts.slideCount - 1. Instead, carouselVisible should be set to slideCount:

opts.carouselVisible = opts.slideCount;

In cycle.transitions.carousel.postInit() line 87 opts._nextBoundry is set to opts.slideCount - opts.carouselVisible. But _nextBoundry is only used when the cycle-update-view event is fired, which already happened BEFORE postInit(). A quick fix is to add the following afterwards:

opts.API.updateView();

In cycle2.js cycle-update-view event line 1126 var nextBoundry = opts._nextBoundry || opts.slideCount - 1 has unexpected results when opts._nextBoundry is 0. I've changed the line to read:

var nextBoundry = opts._nextBoundry !== undefined ? opts._nextBoundry : opts.slideCount - 1;

These were quick fixes. There may be better solutions.

Hey.
Im wondering if i understand your documentation wrong.

i got the following script:

$('.slider').cycle({
after: function(){
alert('hmm');
},
swipe: true,
speed: 1000,
timeout: 1000,
overlay: '.slide_overlay',
overlayTemplate: '

and following html:

http://jsfiddle.net/8gYTX/

It all works perfect exepct for the part where im trying to use after:

Nomatter what i do i cant get it to work, what am i doing wrong here?

i even tryed before and it aint working either wont run the alert.

Also i got a isecond question, im wondering if theres a easier way to detect if the {{title}} or {{cycleRel}}
than having to use the after:

Reason is i need it to hide the "slide_overlay_inner" if either {{title}} or {{cycleRel}} is empty

Hope i made myself clear on what i needed and hope that your able to help out.

Greets
Martin

When using swipe gestures for next/prev navigation, if you touch into the slideshow and make an "L" gesture, by either first dragging down and left, or up and right, 2 issues occur:

1. animations stop working, transitions between slides become instantaneous
2. if a pager is present, the active pager item becomes out of sync with current slide

This can also be triggered with 2 separate gestures. If you first swipe down (to scroll), and quickly swipe left or right within the slideshow node before the original vertical scroll animation has finished, you see the same results.

Using Mobile Safari in iOS6, tested on iPad and iPhone. The first issue above can be seen on http://jquery.malsup.com/cycle2/demo/swipe.php

Cycle had some great demos of nested sliders. I'm not completely sure nested sliders are possible with cycle2, I assume they are but there isn't a clear demo available on http://jquery.malsup.com/cycle2/demo/ -- Would really appreciate this.

Thanks.

When loading images from a CDN and using the loader plugin, every 2nd slide seems to skip the timeout between transitions. I can't reproduce the symptoms without "data-cycle-loader=true".

http://jsfiddle.net/5TKYh/5/

Replicated in Chrome 24, Firefox 15, Safari 5.1.7.

I found a few errors that kept popping up while trying to remove slides from an existing slideshow. Pull request coming.

First of all, this plugin is the amazing one I had used. Many thanks for your effort.

Two suggestions for request:

1. for animation effect: how about to use Dan Eden's animate.css, it's great for slide in and out effect.
   http://daneden.me/animate/
2. for layer slide effect: can cycle2 support layer slide effect?
   first, slide in layer for demo pic, then slide in layer for title, then slide layer for description or some thing else.
   After the first slide done, then do the next slide loop.
   Something like: http://www.themepunch.com/escalation/

Suggestions just for your reference.

Best Regards.

Hi,

i have a problem with the Mustache-style templates used in cycle2 because i use Twig Templates which use the same Mustache-style template.

My Example :
In my file i wrote this piece of code :

Hello Mike,

again thank you for this script. It is amazing!

We got a issue with your carousel in IE8. It works until you slides away a few divs and after a while a issue with a visible margin in the script.

I have two screenshots that shows the issue first from the start when it works smooth and perfect http://sr.dev.saturate.se/start1.png and then later I started to use the arrows back and forward and the problem is visible, http://sr.dev.saturate.se/start2.png

Any ideas?

I can pass you the link to the developer server but I rather not send it here in public on Github.

Alex

Best shown with an example:

$('#parent-slideshow').cycle({
    timeout:0,
    slides:'.slide-item'
});

$('.child-slideshow').cycle();

$('#parent-slideshow').on('cycle-before', function(e, opts, curr, next, flag){
     alert('parent');
}

<div id="parent-slideshow">
    <div class="slide-item">
        <div class="child-slideshow">
            <img src="xxx.gif"/>
            <img src="xxx.gif"/>
            <img src="xxx.gif"/>
        </div>
    </div>
    <div class="slide-item">
        <div class="child-slideshow">
            <img src="xxx.gif"/>
            <img src="xxx.gif"/>
            <img src="xxx.gif"/>
        </div>
    </div>
</div>

Obviously when I transition on #parent-slideshow I expect 'parent' to be alerted, but 'parent' also alerts on transition of #child-slideshow.

Hope I've explained that thoroughly enough?

Many thanks,
Shaun

Hi

I've got a project with a custom slideshow that I'd be interested in swapping out for Cycle2.

The slideshow in question uses divs with background images. The divs themselves are 100% width /height and use background-size:cover to get a "full screen" effect.

A quick test suggests cycle2 is not compatible with that. A wrapper containing lots of images works just fine:

<div id="gallery"  class="cycle-slideshow auto">
  <img src="im1.jpg">
  <img src="im2.jpg">
  <img src="im3.jpg">
</div>

Replace this with background image divs and it doesn't work, the divs are present in generated markup but they're all set to display:none

<div id="gallery"  class="cycle-slideshow auto" data-cycle-slides="div">
  <div style="background-image:url(im1.jpg)"></div>
  <div style="background-image:url(im2.jpg)"></div>
  <div style="background-image:url(im3.jpg)"></div>
</div>

Am I doing something wrong or is this never going to work?

thanks

If you look at [link removed] in a Webkit browser, you'll see the top carousel (under What's On) shows four items nicely spaced (which is what I want) while the one underneath shows the first and last cut off.

View the same page in Firefox or IE and it's the second carousel that displays correctly with the first one only displaying three items.

The first carousel uses data-cycle-carousel-offset="25" while the second uses data-cycle-carousel-visible="4".

Is this a bug with the script or is it a case of user error?

Hi,
I'm using Cycle1 and have no problems, but when I try to upgrade to Cycle2, all of my images stop loading, even those whihc are not in the slideshow.

Perhaps I have a conflict with my Tabs and Lightbox scripts? I am using:

• Dynamic Drive Tabs: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
• Highslide: http://highslide.com/

My images are loaded by Jquery so that I could make the large images load after my icons have loaded. So perhaps my image loading is the conflict?

Here is my page which is working with Cycle1 (but won't with 2), view my code with Firebug, perhaps you can see the issue at a glance?

Click on the 6th icon (decahedron) to see slideshow.
http://instancia.net/portfolio/index.php

Thanks!

This issue has been noted when the carousel option is used.

I've discovered a bug that makes the curr value for the cycle-after callback point to the wrong slide in the following instances...

a: you click on a paging item before the first slide has transitioned( if using a timeout value).
b: when not using a timeout.

Strangely, the bug fixes itself after you've transitioned through all the slides!

When I include cycle2 using:

<script src="..." async></script>

I get Uncaught TypeError: Cannot read property 'autoSelector' of undefined

If I remove the async property the script works fine.

I did some debugging, and it's looks like you need to move the domready function to the bottom of the script
https://github.com/malsup/cycle2/blob/master/jquery.cycle2.core.js#L496

because it's firing before the default are set
https://github.com/malsup/cycle2/blob/master/jquery.cycle2.core.js#L551

When compiling cycle with YUI-Compressor it fails because goto is a valid javascript identifier. and shouldn't be used as a object identifier.

https://github.com/malsup/cycle2/blob/master/jquery.cycle2.command.js#L76