6

当异步调用新的画廊列表时,我正在尝试重新初始化 FlexSlider 而不刷新页面。

我认为下面的例程会起作用,但事实并非如此。即使新图像已成功加载,第一个 FlexSlider 似乎仍然存在。

有没有办法摧毁,然后重建画廊?

谢谢

function flexInit() {
        $('.flexslider').flexslider({
            animation: "slide",
            controlsContainer: ".paginator",
            manualControls: 'a',
            after: function(slider){
                if(slider.atEnd == true)    {
                    // ??? slider.destroy;
                    galBuild();
                }
            }
        });
    }

    function galBuild() {
            $.getJSON("/gallery/next/"+galID, function (data) {
            var results = data.objects;
            var list = $(".flexslider ul.slides");
            var i = 0;
            $.each(results, function () {

                list.append('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>');

            });

            flexInit(); 

            });
    }

    galBuild();
4

3 回答 3

10

我正在使用不同的方法,即

你已经启动了一个 flexslider:

    $('#element).flexslider({
      动画:“幻灯片”,
      控制导航:假,
      方向导航:真
    });

当我想更改以前创建的滑块中的幻灯片并重新启动它时,请执行以下操作:

  • 创建临时 div:

    $('#element).before('
        <div id="element_temp" class="flexslider"></div>
    ');
    
  • 使用先前创建的滑块删除 div

    $('#element).remove();
    
  • 将新的幻灯片列表插入临时 div:

    var html = `
    <ul class='slides">
    <li><img src="link to image" /></li>
    <li><img src="link to image" /></li>
    <li><img src="link to image" /></li>
    </ul>`;
    $('#element_temp').html(html);
    
  • 在临时 div 上启动 flexslider

    $('#element_temp').flexslider({
      animation: "slide",
      controlNav: false,
      directionNav: true
    });
    
  • 将 div ID 从 element_temp 更改为 element

    $('#element_temp').attr('id','element');
    

它适用于多个 flexlider

于 2012-12-04T10:56:38.030 回答
2

Rob 我对此进行了调查并找到了解决方案

您需要像这样修改您的功能

function flexInit() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: ".paginator",
        manualControls: 'a',
        after: function(slider){
            if(slider.atEnd == true)    {
                slider.addSlide(galBuild());
            }
        }
    });
}


function galBuild() {
   $.getJSON("/gallery/next/"+galID, function (data) {
    var results = data.objects;
    var i = 0;
    $.each(results, function () {
       return ('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>');
    });

   });
}

flexInit();

您还需要在slider.update函数中对flexSlider.js 文件进行一些外观更改。现在它不检查位置变量是否未定义,所以你也必须检查它。

于 2012-06-28T18:02:20.583 回答
2

最简单的方法是从元素数据集中删除 flexscroll

function flexInit() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: ".paginator",
        manualControls: 'a',
        after: function(slider){
            if(slider.atEnd == true)    {
                slider.addSlide(galBuild());
            }
        }
    });
}
//this remove flexslider form element dataset
$('.flexslider').removeData("flexslider");

现在你可以自由打电话了

flexInit();

并且您的 flexslider 将被重新创建。

于 2013-11-05T21:08:10.537 回答