How to set a slider within a tab to restart on tab click

[heytricia]

I have a page with multiple sliders - each within its own tab. I'd like for the sliders to start over if a user leaves a tab and then returns. Any help you can provide would be most appreciated.

liquidslider settings:

//Use liquid slider to setup slides within tabbed content
$('#tabs .tab .liquid-slider').liquidSlider({
preloader: true,
autoHeight: false,
dynamicTabs: true,
dynamicTabsHtml: true,
dynamicTabsAlign: 'center',
dynamicTabsPosition: 'bottom',
panelTitleSelector: '.slide-nav',
dynamicArrows: true,
dynamicArrowsGraphical: true,
hideSideArrows: true,
hoverArrows: false,
hoverArrowDuration: 250,
autoSlide: true,
continuous: true,
autoSlideInterval: 5000,
autoSlideDirection: 'right',
slideEaseFunction: 'easeOutCirc',
heightEaseFunction: 'easeOutCirc'
});

I'm using v 2.3.8

jquery for tabs:

//Set transitions for tab changes and activate first tab
$('.sub-menu a:visible').on('click', function(e) {
e.preventDefault();
$('.sub-menu a.active').removeClass('active');
$('.tab:visible').hide();
window.scrollTo(0, 0);
$(this.hash).fadeIn('slow');
if($('.ls-nav:visible a').length < 2) {
$('.ls-wrapper:visible').addClass('single-slide');
};
$(this).addClass('active');
}).filter(':first').click();

[KevinBatdorf]

I would use the API to control the sliders inside. There are a few things you could do...

var api = $.data( $('#slider')[0], 'liquidSlider');

This will store the slider as an object and give you access to its functions.

api.setNextPanel(1)

This will set the panel to the first one. So you would have to set up an event that sets all the sliders to the first panel based on the action you desire. I'm assuming you would want to use the pretransition function in the parent slider.

Here is some more information

[heytricia]

Finally got back to this and got it to work. Thanks so much for the help!

Tricia Francis
heytricia1@gmail.com

On Oct 2, 2014, at 4:07 AM, Kevin Batdorf notifications@github.com wrote:

I would use the API to control the sliders inside. There are a few things you could do...

var api = $.data( $('#slider')[0], 'liquidSlider');

This will store the slider as an object and give you access to its functions.

api.setNextPanel(1)

This will set the panel to the first one. So you would have to set up an event that sets all the sliders to the first panel based on the action you desire. I'm assuming you would want to use the pretransition function in the parent slider.

Here is some more information

—
Reply to this email directly or view it on GitHub.