Question

我有一个包含多个滑块的页面 - 每个滑块都在自己的标签中。如果用户离开选项卡然后返回，我希望滑块重新开始。

开发链接：http://dev.triciafrancis.com/mbrstudios/case-studies/

以下是我用于liquidlider和标签的代码：

//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'
    });
    //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();
}

Answer 1

我通过电子邮件发送了插件作者并获得了以下反馈：

我会使用API来控制里面的滑块。有几个   你可以做的事情......

var api = $ .data（$（＆＃39;＃slider＆＃39;）[0]，＆＃39; liquidSlider＆＃39;）;

这会将滑块存储为对象，并允许您访问它   功能

api.setNextPanel（1）

这会将面板设置为第一个。所以你必须设置   将所有滑块设置为第一个面板的事件   你想要的行动。我假设你想要使用   父滑块中的pretransition功能。

以下是一些更多信息：   https://kevinbatdorf.github.io/liquidslider/examples/page1.html#advanced-controls

我应用了这种方法，最初只能让它在第一个标签中的幻灯片上工作。所以我不得不重新组织liquidlider的选择器并将该技术应用于每个选项卡。这可能是一种更有效的方式，但这就是我的工作方式：

//Use liquid slider to setup slides within tabbed content
    $('#tab1-images, #tab2-images, #tab3-images, #tab4-images').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'
    });
    //Reset slideshows to first image on tab click
    $('.sub-menu li:nth-child(1n) a').on('click', function()  { 
        var tabImages = '#tab1-images';
        if($(tabImages).length) {
            var api = $.data( $(tabImages)[0], 'liquidSlider');
            api.setNextPanel(0);
        }
    })
    $('.sub-menu li:nth-child(2n) a').on('click', function()  { 
        var tabImages = '#tab2-images';
        if($(tabImages).length) {
            var api = $.data( $(tabImages)[0], 'liquidSlider');
            api.setNextPanel(0);
        }
    })
    $('.sub-menu li:nth-child(3n) a').on('click', function()  { 
        var tabImages = '#tab3-images';
        if($(tabImages).length) {
            var api = $.data( $(tabImages)[0], 'liquidSlider');
            api.setNextPanel(0);
        }
    })
    $('.sub-menu li:nth-child(4n) a').on('click', function()  { 
        var tabImages = '#tab4-images';
        if($(tabImages).length) {
            var api = $.data( $(tabImages)[0], 'liquidSlider');
            api.setNextPanel(0);
        }
    })
    //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');
        //Add class to single-image slides, so navigation elements can be hidden with css
        if($('.ls-nav:visible a').length < 2) {
            $('.ls-wrapper:visible').addClass('single-slide');
        };
        $(this).addClass('active');
    }).filter(':first').click();

如何在标签点击上重新启动liquidlider？

1 个答案: