FlexSlider是否有破坏方法？

本文介绍了FlexSlider是否有破坏方法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我会认为下面的例程可以正常工作，但是它不会在不刷新页面的情况下重新初始化FlexSlider 。即使新图像已成功加载，似乎第一个FlexSlider仍然存在。

有没有办法销毁，然后重建图库？

感谢

  function flexInit（）{
 $（'。flexslider'）。 flexslider（{
 animation：slide，
 controlsContainer：.paginator，
 manualControls：'a'，
 after：function（slider）{
 if （slider.atEnd == true）{
 // ??? slider.destroy; 
 galBuild（）; 
} 
} 
}）; 
} 
 
函数galBuild（）{
 $ .getJSON（/ gallery / next /+ galID，function（data）{
 var results = data。对象; 
 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（）;

解决方案

我使用不同的方法，即

您已经开始一个flexslider：

 
 
 $（'＃element） .flexslider（{
 animation：slide，
 controlNav：false，
 directionNav：true 
}）;

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

创建临时div：

  $ '#element）.before（'
< div id =element_tempclass =flexslider>< / div> 
'）;

删除以前创建的滑块的div

  $（'＃元件）卸下摆臂（）;

将新的幻灯片列表插入临时div：

  var html =`
< ul class ='slides> 
< li>< img src =链接到图像/>< / li> 
< li>< img src =link to image/>< / li> 
< li>< img src =映像/>< / li> 
< / ul>`; 
 $（'＃element_temp'）。html（html）;

启动flexslider on temp div

  $（'＃element_temp'）。flexslider（{
 animation：slide，
 controlNav：false，
 directionNav：true 
}）;

将div ID从element_temp更改为元素

  $（'＃element_temp'）。attr（'id'，'element'）;

，它适用于多个flexliders

I am trying to reinitialize FlexSlider with out page refresh when a new gallery listing is called asynchronously.

I would think the routine below would work but it doesn't. It seems like the first FlexSlider persists even though the new images are successfully loaded.

Is there a way to destroy, then rebuild the gallery?

Thanks

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();

解决方案

i'm using different approach i.e.

you've started one flexslider:


    $('#element).flexslider({
      animation: "slide",
      controlNav: false,
      directionNav: true
    });

when I want to change slides in previously created slider and restart it, id do following things:

creating temporaty div:

$('#element).before('
    <div id="element_temp" class="flexslider"></div>
');

delete div with previously created slider
```
$('#element).remove();
```

insert new list of slides into temporary 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);

start flexslider on temp div

$('#element_temp').flexslider({
  animation: "slide",
  controlNav: false,
  directionNav: true
});

change div ID from element_temp to element

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

and it works with multiple flexliders

这篇关于FlexSlider是否有破坏方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Flexslider

FlexSlider是否有破坏方法？

问题描述