标签: flexslider

我正在使用flexslider插件,我想知道是否有一个简单的方法(除了更改插件的核心,这是我将要做的,如果我没有找到一个简单的答案)显示下一张幻灯片当您单击当前幻灯片时.我像这样设置了flexslider

$('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
        animation: "slide",
        controlsContainer: ".flex-container"
    });

我禁用了Prev/Next命令,因为我不喜欢它们.我该怎么办？

我在哪里可以获得Flexslider2的方向导航指针的图像文件:bg_direction_nav.png？

无法弄清楚为什么我不断收到像'Fl'或'Fi'这样的奇怪文字来取代滑块上的箭头.
检查所有内容,我发现下载包中缺少背景图像和指向它的CSS!

丢失的图像可能是我缺失的链接,我可以调整CSS吗？有人可以帮忙吗？

关于destroy方法的github页面上有一些讨论,有关堆栈的几个问题,但是还没有一个直截了当的答案或解决方案,我在很多搜索之后能够找到.

当前版本的flexslider http://www.woothemes.com/flexslider/没有destroy方法.在说明中它表示前1.8版本,但使用该方法不起作用.

我需要取消绑定flexslider元素,然后在另一个元素上调用.flexslider(),因为我不希望同时运行多个滑块.

我怎样才能做到这一点？注意:删除导航元素,删除类,解开UL并删除".clone" li是不够的!我想完全将滑块元素恢复到原始状态!

现在我在初始化flexslider之前克隆滑块,然后使用.after()在滑块后插入克隆,然后删除滑块.但这对我来说似乎是一种非常沉重的态度.

$projCur.addClass('flexslider').flexslider({
    animation: "slide",
    animationSpeed: 500,
    slideshow: false,
    manualControls: '.dot-nav li a'             
});

谢谢!

无论如何我可以将小导航按钮更改为flexslider上的文本按钮吗？我无法在互联网上找到它.

我使用的是一个非常基本的滑块,我有两个问题:

1. 我似乎没有找到隐藏幻灯片下方默认按钮控件的属性？我希望只有悬停的上/下控制.

2. 如果我没有选项1,我自己的控件会隐藏默认值吗？

在此先感谢您的帮助!

码:

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

HTML:

<div class="flexslider">
<ul class="slides">
<li> <img src="http://www.xx.com/1.jpg" alt="" /> </li>
<li> <img src="http://www.xx.com/2.jpg" alt="" /> </li>
<li> <img src="http://www.xx.com/3.jpg" alt="" /> </li>
</ul>
</div>

1. 我正在尝试将slider.pause()和slider.play()事件绑定到我的按钮(请参阅下面的代码).
2. 除非我单击播放按钮两次或在滑块运行时单击播放按钮,否则它会起作用.
3. 然后它似乎运行另一个实例(或某事),因为它以两倍的速度运行,暂停按钮不再停止滑块

问题:有没有办法在调用之前测试滑块是否正在运行,slider.play()或者是在错误的位置调用pause()和/或play()？

请指教.

$(document).ready(function(){
    $('.flexslider').flexslider({
        animation: "fade",
        slideshowSpeed: 2000,
        pauseOnHover: false,
        touch: true,
        controlsContainer: ".fs-container",
        controlNav: true,
        manualControls: ".flex-control-nav li",
        start: function(slider) {
            $('.icon-pause').click(function(){
                slider.pause();
            });

            $('.icon-play').click(function(){
                slider.play();                      
            });
        }
    });
});

我曾经使用过jQuery Cycle插件,因为我喜欢自定义它是多么容易,比如插入我选择的自定义HTML元素,只需将它们分配给"下一个"或"上一个"按钮功能.

我找不到在Flexslider中执行此操作的方法,但是,我只看到自定义分页的选项.例如manualControls.

有谁知道在Flexslider中这样做的方法？例如,将图像或锚设置为"下一个"按钮.

我正在努力解决基于Webkit的浏览器的问题,如果我向div添加边界半径然后将-moz-translate3d应用到ul里面(这是因为在原始示例中我使用的是flexslider幻灯片),边框半径不适用并通过容器渗出.

要清楚地理解我在说什么,这是一个关于这个问题的小例子.如果我删除translate3d属性,则应用边框半径.

HTML:

<div class="wrapper">
    <ul>
        <li>
            <div class="caption"><p>Test</p></div>
        </li>
        <li>
            <div class="caption"><p>Test</p></div>
        </li>
        <li>
            <div class="caption"><p>Test</p></div>
        </li>
        <li>
            <div class="caption"><p>Test</p></div>
        </li>
    </ul>
</div>

CSS:

.wrapper {
    border-radius: 20px;
    position: relative;
    width: 500px;
    height: 200px;
    overflow: hidden;
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    padding: 2rem;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 3rem;
    color: #fff;
}

ul {
    width: 800%;
    -webkit-transform: translate3d(-500px, 0, 0); 
}

li {
    float: left;
    width: 500px;
    height: 200px;
    background-color: #000;
    position: relative; …

我试图在我的网站上整合wootheme的Flexslider,它看起来/效果很好,除了加载时.

当您使用滑块刷新页面时,在flexslider加载(大约1秒)之前,第一张幻灯片显得很大并闪烁为黑色然后消失,然后出现轮播.

我认为图像的加载速度比jquery快？我怎样才能隐藏图像,而不是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轮播 - 它有多个图像,但当前图像居中,下一个/ prev图像到屏幕外 - 就像这个网站 http://www.ncad.ie/

到目前为止,我已经得到了一张图片:http: //jsfiddle.net/Y3kx5/

看看这个声称解决它的其他问题,但我无法让它工作: FlexSlider:居中当前图像

尝试过其他flexslider JS,例如:

$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
itemWidth: 800,
minItems: 3,
maxItems: 3
});

但是屏幕上有3个图像 - 而我只希望当前的图像完全在屏幕上,而下一个/ prev显示的只有窗口允许的数量.

在此先感谢.ben.