标签: flexslider

我试图垂直和水平地居中覆盖图像幻灯片(flexslider)的一些内容.有一些类似的问题,但我找不到一个直接适用于我的具体问题的令人满意的解决方案.由于FlexSlider的限制,我不能position: absolute;在我的实现中使用img标记.

我几乎有下面的工作方法.唯一的问题是我无法inner-wrapper使用display: table-cell属性获取宽度和高度声明来处理div .

这是标准行为,还是我错过了我的代码？如果这是标准行为,那么我的问题的最佳解决方案是什么？

HTML

<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>

CSS

html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
}

ul {
    background: #CCC;
    height: 100%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 410px;
}

.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; …

我在我正在建设的网站上使用Flexslider.

我非常喜欢响应性,这就是我不想改为nivo-slider或类似东西的原因.

关于它的负面影响是它在加载所有图像之前不显示第一个图像.所以你必须等待加载滑块中的所有图像才能使网站正常显示.这在台式机/笔记本电脑上是可以接受的,但在移动设备上则不行.

我在这里找到了一个类似的问题Flexslider - 图像预加载器,但我无法让它工作.

我用它来触发代码

$(window).load(function() {
        $('.flexslider').flexslider();
    });

这在我的HTML中

                <ul class="slides">             
                <li>
                    <img src="pictures/slide1.jpg" alt=" ">
                <li>
                    <img src="pictures/slide2.jpg" alt=" ">                         
                </li>
                <li>
                    <img src="pictures/slide3.jpg" alt=" ">
                </li>
                <li>
                    <img src="pictures/slide4.jpg" alt=" ">
                </li>
            </ul>

问题是.如何让滑块尽快显示第一张图像？然后是第二个等等.

编辑:我解决了这个问题.它在下面的正确答案中给出.如果您有更好的解决方案:请分享:D

我有一个我希望从元素外部控制的Flexislider.我试过这个:

var myslider = $('.slider').flexslider({
    animation: 'slide'
});

$('button').click(function () {
    myslider.flexAnimate(3)    //Function: Move slider - (target, pause) parameters
});

但那会回来 TypeError: Object [object Object] has no method 'flexAnimate'

然后我偶然发现了这个线程(https://github.com/woothemes/FlexSlider/issues/125),这表明这是正确的方法:

$('button').click(function () {
    myslider.flexslider(3)
});

但是我看不出如何指定动画的速度.我希望改变只对该事件立即进行.

我想我想知道如何从滑块元素外部访问文档中提到的滑块API

slider                        //Object: The slider element itself
slider.container              //Object: The ul.slides within the slider
slider.slides                 //Object: The slides of the slider
slider.count                  //Int: The total number of slides in the slider
slider.currentSlide           //Int: The slide currently being shown
slider.animatingTo            //Int: Useful in .before(), the …

我正在使用Flexslider从API中提取不同大小的产品图像.我一直把它们扔进Flexslider <ul>,但是这些不同的图像尺寸效果不佳.当图像具有不同的高度时,Flexslider很好地动画,但我希望Flexslider具有固定的高度和宽度以适合我的布局.我已经尝试将整个内容放入固定大小<div>,但Flexslider完全忽略它并溢出到布局的其余部分.有没有办法调整图像大小以适应Flexslider不调整大小？

有人知道如何在弹性滑块中停止自动滑动.因为我已经在我的移动网页中加载了该滑块.当页面打开时,它会滑动到下一个图像,而不会有任何幻灯片或点击事件.所以请帮我停止这个自动幻灯片转换.并且只有在轻触或滑动屏幕时才能使其工作.提前致谢.

这是我的代码..

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

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="img1.png"/>
        </li>
        <li>
            <img src="img2.png"/>
        </li>
    </ul>
</div>

我试图通过使用Lazy Loading jquery插件并遵循此站点上的说明来为Flexslider进行延迟加载:http://www.appelsiini.net/projects/lazyload

我正在加载插件脚本,并没有在控制台上看到任何错误.我尝试没有容器或选项在lazyload函数中传递,但仍然没有.我花了好几个小时.

$("img.lazy").lazyload({
  effect: "fadeIn",
  container: $(".slides > li")
});

有谁知道如何在Flexslider中进行延迟加载？

这个让我难过.我已经多次使用Flexslider没有问题,但是现在我正在构建一个网站,它只是拒绝正常工作.

最后一张幻灯片将显示加载并保持可见状态,直到它循环显示所有这些幻灯片,此时事情将开始正常工作.

我已经尝试了各种各样的东西,减少了它,但是它似乎可以解决它.唯一改变这种行为的是如果我将动画更改为幻灯片而不是淡入淡出.但我绝对想要褪色.我肯定想弄清楚为什么会这样.

看起来它可能是一个CSS问题,但我找不到它.

以下是我的工作:http: //www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/

编辑:

我做了几个超级简化的测试用例,只有基本的HTML,Flexslider CSS/JS和jQuery被加载,没有别的,并且bug仍然存在.

使用淡入淡出动画,有错误:http: //www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/wp-content/themes/coppercity/test-fade.html

编辑2

我是一个白痴.我将容器的类名从"flexslider"更改为"hero",但没有更新flexslider.css以反映这一点.[叹]

谢谢你的期待.

我正在使用Flexslider并且已经被要求在不同的时间显示每张幻灯片,具体取决于它有多少内容,所以快速的短句和段落的速度很慢.当flexslide只允许1个Slideshowspeed值时,如何设置它.我的代码:

$(window).load(function() {
        $('#flexslider1').flexslider({
        easing: "swing",  
        animation: "fade",
        slideshowSpeed: 7000,
        animationSpeed: 600,
        startAt: 0,
        initDelay: 0,
        controlNav: true,
        directionNav: true,
        pausePlay: true,
        pauseText: 'Pause',
        playText: 'Play'
    }); 
});

我之前在Stackoverflow上看过这个问题,但是找不到准确的答案.我只想让字幕叠加在我的图像上.相反,他们似乎只是落在了下面.我假设这可能是一个定位问题,但找不到任何其他资源来查明问题.我想我会问这里.感谢您提前的时间.下面是CSS,HTML和JavaScript以及jQuery.我已按照Flexslider所述的说明进行安装.

CSS

    .flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: …

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

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

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