Tag: flexslider

Flexslider和Right-to-Left语言支持

我在WordPress上安装了一个包含Flexslider的模板。 我的语言是从右到左(RTL)编写的。 当页面为RTL时,Flexslider停止并且不显示任何图像。 我该如何解决这个问题?

如何使用before()回调来停止或延迟flexslider动画?

我在幻灯片放映到下一张幻灯片之前在幻灯片的所有元素上添加了一个类.animate-out ,问题是应用的css动画不会显示,因为flexslider会立即移动到下一张幻灯片。 我正在使用flexslider的before()回调函数添加该类,该函数在为滑块设置动画的函数内部调用 ,因此使用slider.pause()暂停滑块(使用它将暂停下一张幻灯片)为时已晚。 我已经在before()回调函数中使用alert()测试了动画,该函数暂停了javascript执行,我可以看到.animate-out添加的css动画。 有没有办法阻止滑块动画(我稍后会使用slide.flexAnimate()手动动画)? 如果没有,是否有办法延迟幻灯片? 这是Github上的代码 。

如何在jquery flexslider完成加载之前隐藏图像

我尝试在我的网站上集成了wootheme的Flexslider,它看起来/效果很好,除了加载时。 当您使用滑块刷新页面时,在flexslider加载(约1秒)之前,第一张幻灯片显得非常大并闪烁为黑色然后消失,然后出现轮播。 我认为图像加载速度比jquery快? 我怎样才能隐藏图像,无论是在网站上,就像在演示网站上一样,即使我刷新30亿次,问题也不会在他们的网站上重复出现,它们都能正常加载! – http://flexslider.woothemes.com/carousel -min-max.html ) 我在jquery之后加载了flexlisder.js并从demo中复制了相同的html代码(以匹配同时加载的.css文件。这里是我正在使用的init代码 – 来自演示站点: $(document).ready(function() { $(‘.flexslider’).flexslider({ animation: “slide”, animationLoop: false, itemWidth: 210, itemMargin: 5, minItems: 2, maxItems: 4 }); });

使用Flexslider进行哈希URL导航

我正在构建一个使用flexslider的网站,但我想实现一些URL哈希导航。 基于URL的哈希,我计划获取我想要显示的幻灯片的索引,并且我最接近的是通过查看手动导航的代码,其中被点击的元素的索引等于索引的滑动: slider.controlNav.live(eventType, function(event) { event.preventDefault(); var $this = $(this), target = slider.controlNav.index($this); if (!$this.hasClass(namespace + ‘active’)) { (target > slider.currentSlide) ? slider.direction = “next” : slider.direction = “prev”; slider.flexAnimate(target, vars.pauseOnAction); } }); 所以我尝试调整原理并将其放在Flexslider的start属性中: $(‘.flexslider’).flexslider({ start: function(slider) { var target = 2; // Set to test integer (target > slider.currentSlide) ? slider.direction = “next” : […]

覆盖打开时暂停Flexslider

我们目前正在开发一个利用Flexslider插件的项目(最近被Woo Themes收购)。 我们在此页面上有多个弹出窗口,我们希望滑块在弹出窗口处于活动状态时暂停,并在弹出窗口关闭时恢复。 暂停只能在第一轮进行,并且恢复滑块不起作用。 下面是我们用于滑块的代码。 我尝试使用除“结束”调用之外的所有可用调用切换“启动”function。 $瓦特( ‘#滑块帧’)。flexslider({ 动画:’淡出’, directionNav:false, slideshowSpeed:4000, controlNav:是的, pauseOnHover:true, manualControls:’#indicator-dots li’, start:function(slider){ $ W( ‘投资回报率,点击’)。点击(函数(){ slider.trigger( ‘的mouseenter’); }); $ w(’div#ovrly,a#close’)。click(function(){ slider.trigger( ‘鼠标离开’); }); } }); 该页面的链接是http://www.whitehardt.com/sandbox/whitehardt-v3 。 任何有关这方面的帮助将不胜感激。

如何销毁/删除/取消绑定Flexslider

关于destroy方法的github页面上有一些讨论,有关堆栈的几个问题,但是还没有一个直截了当的答案或解决方案,我在很多搜索之后能够找到。 当前版本的flexslider http://www.woothemes.com/flexslider/没有destroy方法。 在说明中它说前1.8版本,但使用该方法不起作用。 我需要取消绑定flexslider元素,然后在另一个元素上调用.flexslider(),因为我不希望同时运行多个滑块。 我怎样才能做到这一点? 注意:删除导航元素,删除类,解开UL并删除“.clone” li是不够的! 我想完全将滑块元素恢复到原始状态! 现在我在初始化flexslider之前克隆滑块,然后使用.after .after()在滑块后插入克隆,然后删除滑块。 但这对我来说似乎是一种非常沉重的态度。 $projCur.addClass(‘flexslider’).flexslider({ animation: “slide”, animationSpeed: 500, slideshow: false, manualControls: ‘.dot-nav li a’ }); 谢谢!

是否有FlexSlider的destroy方法

当我异步调用新的图库列表时,我试图在页面刷新时重新初始化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(” + […]

Flexslider中的延迟加载

我试图通过使用Lazy Loading jquery插件并遵循此站点上的说明来为Flexslider进行延迟加载: http : //www.appelsiini.net/projects/lazyload 我正在加载插件脚本,并没有在控制台上看到任何错误。 我尝试没有容器或选项在lazyload函数中传递,但仍然没有。 我花了好几个小时。 $(“img.lazy”).lazyload({ effect: “fadeIn”, container: $(“.slides > li”) }); 有谁知道如何在Flexslider中进行延迟加载?

Flex Slider – 如何为两个滑块添加相同的控件

我正在使用Flex slide r进行一个项目。 我需要在一个页面上使用相同的控件控制两个滑块。 一部分是显示图像的主滑块,第二部分是文本(在这种情况下,它将取自WP中的“the_excerpt”)。 基本上,这是我用来在一个页面上调用两张幻灯片的代码: $(window).load(function() { $(‘#main-slider’).flexslider({ animation: ‘slide’, controlsContainer: ‘.flex-container’ }); $(‘#secondary-slider’).flexslider(); }); 现在,我需要将它们“连接”到相同的控件,所以当我点击箭头时,它会滑动/淡化它们。