jQuery SlidesJS

Question

I have many jQuery SlidesJS in different jQuery tabs. Works great. My problem now is, when I click on tab2 with slide2 and I'm going back to tab1 with slide1, I want to restart slide1 at 1! My code for this is:

<script>
    function start(_start) {
        if(_start != "") {
            starter = _start;
        } else {
            starter = 1;
        }
        $('#slides1, #slides2, #slides3').slides({
            start: starter,
            preload: true,
            slideSpeed: 1000,
            play: 4000,
            pause: 2000,
            slideEasing: 'easeInOutQuint',
            generateNextPrev: false,
            pagination: false,
            next: 'next',
            prev: 'prev'
        });
        $("#tabs").tabs();              
    }

    $(document).ready(function() {
        start(1);

        $("#ui-id-1").click(function(){
            start(1);
        });         
    });
</script>

#ui-id-1 is tab1. Clicking on it is should start slide1 at 1. But what I get is a blank white div. Any ideas how to start at 1 when I click on the tab?

score 1 · Answer 1 · answered Jan 10 '14 at 15:24

That is the problem with that slidesjs calculates invisible values into height: 0 width: 0

The solution is quite simple: you should init slidesjs not at document ready event, but when user actually clicks a tab and after tab contents are displayed.

That is how I init visible one first:

  $('.bc-slider .frames:visible')).slidesjs({
    width:      1024,
    height:     260,
    play:       {
      auto:   false,
      effect: "slide"
    },
    navigation: {
      effect: "slide",
      active: false
    },
    pagination: {
      active: false,
      effect: "slide"
    },
    effect:     {
      fade: {
        speed: 500
      }
    }
  });

And this is the code which shows the hidden sliders on show:

content.eq(index).find('.frames').slidesjs({
  width:      1024,
  height:     260,
  play:       {
    auto:   false,
    effect: "slide"
  },
  navigation: {
    effect: "slide",
    active: false
  },
  pagination: {
    active: false,
    effect: "slide"
  },
  effect:     {
    fade: {
      speed: 500
    }
  }
});

content is a event-local variable that contains reference to the tab being displayed right now.

jQuery SlidesJS

1 Answers1