18

For example I have carousel with 3 images, when the carousel slides the new images are added via 'slid' event

$('#imageCarousel').on('slid', function (event) {
      //add more images
});

I want to disable animation for the carousel, so transition time is set to 0 in carousel css as it was shown here removing carousel animation. But after that 'slid' event does not fire. I cannot use 'slide' event, because I need to know which item is active in the carousel, but the 'active' class is not set up after the 'slide' event. How can I solve it? Thanks.

Community
  • 1
  • 1
IgorCh
  • 2,641
  • 5
  • 22
  • 29

1 Answers1

47

I suppose you can use the following code,

just remove the slide class from carousel div and use like,

<div class="carousel">

this will remove the slide animation effect, see the working fiddle,

Able Alias
  • 3,824
  • 11
  • 58
  • 87
  • No, interval it is time between cycling an item, I already use it. I'm interesting in removing animation during sliding (.carousel('next')) – IgorCh Sep 12 '13 at 09:35
  • you mean, want to stop the next & prev? – Able Alias Sep 12 '13 at 09:36
  • I mean the next(previous) image should be shown instantly when next(previous) function is called, without slide animation – IgorCh Sep 12 '13 at 09:41
  • 1
    ok, got the answer, just remove the "slide" class, for example, instead of this
    use
    see the fiddle http://bootply.com/80513
     – Able Alias Sep 12 '13 at 09:59
  • maybe I didn't get something, but 'slid' event still doesn't work in your example. – IgorCh Sep 12 '13 at 10:48
  • you just add the following in the javascript part of that example,$('#carousel-761238').on('slid', function (event) { alert('message'); });. here is the new example with slide event http://bootply.com/80526 – Able Alias Sep 12 '13 at 10:53
  • ok, it works, I used bootply in a wrong way. Please update your answer (removing the slide class) and I will mark it as accepted, maybe it will be helpful for someone else. Thanks! – IgorCh Sep 12 '13 at 11:46