我正在设计一个网站,我有一个大横幅(用flexslider制作)滚动图像和电影(我想用JWplayer流式传输).
有没有人在flexslider中使用jwplayer视频？它确实在flexsliders的网站上说支持任何html元素,但我想从实际的用户体验中知道这是否可行(并且经过多次尝试后我还没有从woothemes得到答案).
或者是否有其他更好的解决方案在flexslider中嵌入电影？
我正在使用jquery FlexSlider以下是我的代码
<link rel="stylesheet" type="text/css" href="css/gallery/shCore.css" />
<link rel="stylesheet" type="text/css" href="css/gallery/shThemeDefault.css" />
<link rel="stylesheet" type="text/css" href="css/gallery/flexslider.css" />
<script type="text/javascript" src="js/gallery/modernizr.js"></script>
<script type="text/javascript" src="js/gallery/jquery.flexslider.js" ></script>
<script type="text/javascript" src="js/gallery/shCore.js"></script>
<script type="text/javascript" src="js/gallery/shBrushXml.js"></script>
<script type="text/javascript" src="js/gallery/shBrushJScript.js"></script>
<script type="text/javascript" src="js/gallery/jquery.easing.js"></script>
<script type="text/javascript" src="js/gallery/jquery.mousewheel.js"></script>
以下是身体
<body>
<div id="slider" class="flexslider">
<ul class="slides">
<li >
<img src="images/gallery/1.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" />
</li>
<li >
<img src="images/gallery/2.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px"/>
</li>
<li >
<img src="images/gallery/3.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" />
</li>
<li > …我正在玩Flexslider 2的CSS和Javascript,我无法弄清楚如何隐藏我的幻灯片放映的初始幻灯片的"上一页"箭头.我想在幻灯片的剩余部分重新出现.
任何帮助都是真诚的感谢.
案件
我从使用bjqs滑块(它的响应能力是低于的)切换到使用流行的FlexSlider.我修改了bjqs滑块以显示屏幕中心的"当前"图像,并在当前图像之前和之后(部分)显示上一个和下一个图像.您可以在此处使用bjqs滑块查看我的实现,以了解我所追求的内容.
现在使用FlexSlider,我无法找到一种方法来做到这一点.图像向左浮动,因此"当前"图像定位在容器的左侧.有人知道这样做的方法吗？
现在我只是使用FlexSlider的默认样式和标记,使用以下javascript:
$('.flexslider').flexslider({
animation: "slide",
itemWidth: 850,
});
我.animate-out在flexslider动画到下一张幻灯片之前在幻灯片的所有元素上添加了一个类,问题是应用的css动画将不会显示,因为flexslider会立即移动到下一张幻灯片.
我正在使用flexslider的before()回调函数添加该类,该函数在为滑块设置动画的函数内部调用,因此slider.pause()暂停滑块使用时间太晚(使用它会暂停下一张幻灯片).
我已经使用回调函数alert()内部测试了动画,该before()函数暂停了javascript执行,我可以看到添加的css动画.animate-out.
有没有办法阻止滑块动画(我slide.flexAnimate()稍后会用手动动画)？如果没有,是否有办法延迟幻灯片？这是Github上的代码.
我有一个固定定位的flexslider网页.我使用以下代码来制作flexslider固定位置并添加滑块作为背景.
.flexslider {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
height: 100%;
width: 100%;
z-index: -1;
border: none;
}
并且网页具有粘性导航,当用户滚动到视口高度的一半的顶部高度时,该导航变得固定.我通过使用以下jQuery和CSS来做到这一点:
jQuery的:
$(window).scroll(function() {
var scrollTop = $(window).height()/2;
if ($(window).scrollTop() >= scrollTop) {
$('.main-header').removeClass('main-header ').addClass('fixed-header');
}
if ($(window).scrollTop() < scrollTop) {
$('.fixed-header').removeClass('fixed-header').addClass('main-header ');
}
})
CSS:
.fixed-header {
position: fixed;
top: 0;
left: 0;
}
我的HTML标记是:
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/image1.jpg" />
</li>
<li>
<img src="images/image2.jpg" />
</li>
<li>
<img src="images/image3.jpg" />
</li>
</ul>
</div>
<header …我在我的网站上嵌入了带有旋转木马的flex滑块.但是,我没有很好地设置滑块的属性(或者可能是CSS),就像这样.http://www.screencast.com/t/xlRssnj43旋转木马的最后一张图片显示了一半.
虽然我可以点击它,理想情况下我希望它是这样的:http://www.screencast.com/t/NfOlZdUMQh有下一个/上一个按钮显示所有的时间,并有4个完整的图像显示.第五张应该在下一张幻灯片上.
这是我的HTML:
<div class="slider">
<div class="flexslider" id="slider">
<ul class="slides">
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image5.jpg" /></li>
</ul>
</div>
<!--flexslider-->
<div class="flexslider" id="carousel">
<ul class="slides">
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image5.jpg" /></li>
</ul>
</div>
<!--flexslider-->
</div>
这是我的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();
}
}); …我正在尝试使旋转木马类似于以下内容：-http : //flexslider.woothemes.com/carousel-min-max.html
基本上，我只希望它一次前进一两个项目，而不是每次幻灯片放映时都替换全部项目。
我一直在玩最小和最大范围，但是似乎给出了不可预测的结果，我不确定那正是我真正需要的：
$('#photos-ylnm').flexslider({
animation: "slide",
itemWidth: 100,
minItems: 10,
maxItems: 12,
slideshow: 1,
animationSpeed: 350,
slideshowSpeed: 1000
});
谁能看到我在做什么错？使用FlexSlider可以实现吗？
我正在尝试从 css 文件更改 Flexslider 箭头设计，但失败了。我正在提供我所做的和想要的内容的屏幕截图 :D 或者有什么方法可以更改 flexslider 图标或字体？这是我的工作：http : //i.stack.imgur.com/4fgcU.png 这是我想做的：http : //i.stack.imgur.com/zhxqI.png
<ul>
<li><a href="#" title="Previous"><span class="icon icon-arrow-left8"></span></a>
</li>
<li><a href="#" title="Next"><span class="icon icon-arrow-right8"></span></a>
</li>
</ul>
我想更改 WooCommerce FlexSlider 以使用图库中的点而不是缩略图。但在桌面上我想显示缩略图。
我找到了一个使用点或缩略图的解决方案，但不是在不同的视口中同时使用它们。
以下是我使用缩略图所做的操作：
add_filter( 'woocommerce_single_product_carousel_options', 'custom_update_woo_flexslider_options' );
function custom_update_woo_flexslider_options( $options ) {
$options['controlNav'] = 'thumbnails';
return $options;
}
对于点，我将代码更改为：
$options['controlNav'] = true;
但在这种情况下，我必须对所有视口使用其中之一。
有什么办法可以同时使用两者吗？或者每个视口一个？
flexslider ×10
jquery ×9
css ×2
javascript ×2
arrows ×1
carousel ×1
css-position ×1
jwplayer ×1
php ×1
slider ×1
slideshow ×1
woocommerce ×1
wordpress ×1