Tag: flexslider

Flexslider中每张幻灯片的不同下一个和上一个文本

我使用wordpress自定义post创建了一个flexslider。 我总共有6个post,6个幻灯片从这些post的内容中提取出来。 我需要将“下一个”和“上一个”的文本更改为幻灯片中下一个和上一个post的标题。 这是我目前使用的jQuery代码: $(‘#ethosBotSection’).flexslider({ animation: “slide”, slideToStart: 0, useCSS: false, controlNav: true, directionNav: false, slideshow: false, manualControls: ‘.ethosNav li’, start: function(slider) { $(‘.ethosNav li’).click(function() { $(‘.flexslider’).show(); var slideTo = $(this).attr(“rel”) var slideToInt = parseInt(slideTo) if (slider.currentSlide != slideToInt) { slider.flexAnimate(slideToInt) } }); } }); 感谢和问候

Flexslider – 鼠标hover在圆点上时显示工具提示

我在我的页面中使用http://flexslider.woothemes.com/ flex滑块插件。 Below is my code for flexslider: html: Image 1 Image 2 Image 3 js: java script code for flex slider and this code is used to initialize the flex slider while page load. $(window).load(function() { $(‘.flexslider’).flexslider({ animation: “slide”, slideshow: false, controlNav: true, directionNav: false, easing: “swing” }); }); 所有,我想要的是当我鼠标移动到点(用于在幻灯片之间导航)时,工具提示应该重新出现并显示某种消息说“幻灯片编号”。

用于幻灯片导航控制按钮的自定义图标/图像,如viber.com上

我正在使用flexslider,我想改变。 。 。 将导航控件滑动到我自己的图标或每张幻灯片的图像。 喜欢http://viber.com上的幻灯片,如果不能在flexslider上使用插件,我可以这样做。

重新加载Flexslider

我正在使用由以下代码触发的flexslider插件: $(window).on(‘load’, function () { $(‘.flexslider’).flexslider(); }); 一旦页面加载就会运行。 在应用程序的后期,我已经替换了flexslider的内容(其中的图像数量及其来源),需要重新加载flexslider。 我的代码如下: document.getElementById(‘contestant1’).onclick = function() { process(); } output = “”; for (num=1; num<=3; num++) { imagesource = "Week" + num + "/Antony.png"; output = output + " “; } document.getElementById(‘images’).innerHTML = output; console.log(output); $(‘.flexslider’).flexslider(); 请告诉我如何强制flexslider重新加载。 以下是完整应用程序的链接,但它有一些与问题无关的更复杂的元素: http://eg-graphics.com/zwooper/EGVGV/Season2/MemoryWall.html

使用Flexslider 2覆盖CSS Display属性

我愿意隐藏在旋转木马div div#carousel_container – 在我的情况下 – 这个Flexslider 2.2滑块所有 的某个类但是第一个 。 我计划这样做的方法是将它们全部隐藏(显示:无),然后使用jQuery显示(显示:块)第一个 ,可以用以下自定义属性data-gal-order = 1来识别data-gal-order = 1 。 我尝试了几种方法: 在我的样式表中添加div#carousel_container .slides li {display:none;} ,然后使用jQuery仅将所需元素的display属性更改为block 。 添加!important对#1 !important 。 这成功隐藏了我的项目,但后来我无法切换回display:block使用jQuery display:block 。 使用jQuery首先将display:none属性设置为所有 元素,然后将display:block设置为目标元素。 通过.css(‘display’, ‘none’)和相反。 或者通过.attr(‘style’, ‘float: left; display: none; width: 210px;’)和相反的。 在滑块声明之前或之后执行我的自定义脚本#2 – 即 //my custom script [before] //slider declaration $(‘div#carousel_container’).flexslider({ animation: “slide”, controlNav: false, animationLoop: […]

使用Flexslider的selector属性以DOM降序跳过某些幻灯片

为什么我不能让Flexslider的“selector”属性在DOM命令中定位不是一个接一个的幻灯片时正常工作? 基本上,我发现定位.testA会起作用,而目标.testB , .testC或.testD会失败 。 在这里失败实际上意味着它首先正确显示,但是当点击缩略图导航轮播的最后一张幻灯片时,它会滚动到“无”(白色背景)…… 这是JSFiddle ,它是Thumbnail Slider官方示例实现(包含在Fiddle中的链接)的副本,我在其中添加了类和自定义选择器。 要检查各种定位选项,您可能需要在JS窗口中为当前选择器参数添加注释标记,并从#slider和#carousel divs中删除以下内容。

设置显示Flex Slider轮播图像的数量

我在我的网站上嵌入了带有旋转木马的flex滑块。 但是,我没有很好地设置滑块的属性(或者可能是CSS),就像这样。 http://www.screencast.com/t/xlRssnj43旋转木马的最后一张图片显示了一半。 虽然我可以点击它,理想情况下我希望它是这样的: http : //www.screencast.com/t/NfOlZdUMQh有下一个/上一个按钮显示所有的时间,并显示4个完整的图像。 第五张应该在下一张幻灯片上。 这是我的HTML: 这是我的jquery代码: $(‘.flexslider’).each(function() { var $root = $(this); // kill item if no image $root.find(“li”).each(function(){ var src = $(this).find(“img”).attr(“src”); if(!src){ $(this).remove(); } }); }); $(‘#carousel’).flexslider({ animation: “slide”, controlNav: false, animationLoop: false, slideshow: false, itemWidth: 91, itemMargin: 19, //this seems like not working, I also set in css […]

事件未触发(或正确形成)后的FlexSlider

我正在使用Flexslider为一系列滚动幻灯片制作动画。 它在并且正常工作。 我现在要做的是利用’after:’回调来淡化幻灯片中的标题。 就运行顺序而言,它看起来像这样: 幻灯片(包含背景图片)淡入。 暂停(1秒)。 标题淡入。 我在’after:’事件旁边使用了以下function,你不知道它,它不起作用。 标题已设置为显示:无; 但从未表现出来(是的,我的时机很好)。 after: function(){$(‘.headline’).fadeIn(500);}, HTML: Headline text goes here 指导将不胜感激。 谢谢,@ rrfive

使用新选项重新初始化现有的jQuery flexslider

我使用$(document).ready来加载脚本: $(document).ready(function (){ $(‘.flexslider’).flexslider({ animation: ‘fade’, controlsContainer: ‘.flexslider’ }); }); 接下来我想通过按钮更改选项“动画”: FADE SLIDE 但这不起作用: $(document).ready(function (){ $(‘#link-fade’).click(function(){ $(‘.flexslider’).flexslider({ animation: ‘fade’, controlsContainer: ‘.flexslider’ }); return false; }); $(‘#link-slide’).click(function(){ $(‘.flexslider’).flexslider({ animation: ‘slide’, controlsContainer: ‘.flexslider’ }); return false; }); });

对象没有方法’flexslider’

我想在我的网站上设置’flexslider’。 所以我使用这个jQuery加载函数,显然它没有加载.. $(window).load(function() { $(‘.flexslider’).flexslider({ animation: “slides”, animationLoop: false, itemWidth: 100, itemMargin: 5 }); }); 但是当我在控制台中查看时,我得到了这个错误消息: Uncaught TypeError: Object [object Object] has no method ‘flexslider’ 如果网站可以提供任何帮助: http : //nworks.nu/projects2013/sthlm/index.html