Reset or Reload Jcarousel on tab change

Question

I have made two jcarousel sliders in two different tabs using jquery Ui...

When i change the tab section the slider has to reset (or) reload and moves to its first image.

I have used this script

jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel();
  jQuery('#mycarousel2').jcarousel();
  $( "#tabs" ).tabs();
});

I tried this script i didn't have any effect on code

<script type="text/javascript"> 
    var theModelCarousel = null; 

    function modelCarousel_initCallback(carousel) { 
        theModelCarousel = carousel; 

    }; 

    jQuery('#tabs-2').click(function() { 


         jQuery('#mycarousel').jcarousel({ 
            initCallback: modelCarousel_initCallback 

        });

    }); 

    function clearModelCarousel() { 
        theModelCarousel.reset(); 

    } 
</script>

How can i reset the slider if i change to another tab (without refreshing the page).

Here i have made a BIN for easy understanding.

score 3 · Answer 1 · answered Jan 24 '13 at 04:47

3

You would try with the reload options in jcarousel

.jcarousel('reload' [, options])

jCarousel API

$('.jcarousel').jcarousel('reload', {
    'animation': 'slow'
});

answered Jan 24 '13 at 04:47

muthu

5,381
2
33
41

Also tried that muthu [Here](http://jsbin.com/idabit/17/) But this is not working dont know why? – Vivek Dragon Jan 24 '13 at 05:11
Got it working. In general reload is enough. If it is behaving in strange way it is because of incorrect timing and race condition. If you are doing in the same function scroll with animation with setting slow (maybe takes 1 second) and just after that ajax request + modifying dom chances are there is race condition. Try in 2 places doing carousel.reload() just after you modify dom and on event 'jcarousel:animateend'. If works figure out your way to avoid unnecessary reloading. – MorioBoncz May 14 '14 at 20:39

score 2 · Accepted Answer · answered Apr 06 '13 at 11:30

2

Refer the API

Its really a simple problem

http://sorgalla.com/jcarousel/docs/reference/api.html

 .jcarousel('reload' [, options])

answered Apr 06 '13 at 11:30

Jhonny

164
1
9

score 1 · Answer 3 · answered Jun 26 '13 at 21:31

1

jQuery('#mycarousel').data('jcarousel').scroll(0);

This will reset your carousel to starting position;

or if in a function you have the carousel object

carousel.scroll(0);

answered Jun 26 '13 at 21:31

vishal joisar

11
1

quasi · Answer 4 · 2013-09-28T12:26:03.087

I had the same problem and .jcarousel('reload' [, options]) or $('#mycarousel').jcarousel('scroll', 0); were having a strange side effect.

('scroll', 0) was just working randomly as the jcarousel reorders your elements.

('reload' [, options]) was working on first sight but when you clicked on the next picture button, it was sliding to the picture next to the last one you saw. And was not working if you we're using the previous picture button last.

What did worked for me is to bind the jcarousel script to an image gallery every time it was opened and then to destroy the jcarousel everytime it was closed:

to delete jcarousel use :

$('.gallery').jcarousel('destroy');

score 0 · Answer 5 · answered Jan 25 '13 at 02:27

  $('#tabs').on('click', '.ui-tabs-anchor', function() {
    $('#mycarousel').jcarousel('scroll', 0);
    $('#mycarousel2').jcarousel('scroll', 0);
  });

Maybe could use scroll method to locate the 1st item in the carousel. http://jsbin.com/idabit/23/edit

Reset or Reload Jcarousel on tab change

5 Answers5