我有一个(不寻常的)来自客户端的请求,即在“幻灯片”动画期间每个幻灯片之间至少有40个像素的填充/边距. Flexslider的默认值是针对彼此刷新的项目.
2.0中有一个新的JQuery选项用于“itemmargin”,但它似乎只用于“carousel”设置.如果我通过CSS应用保证金,每张幻灯片都会碰到下一张幻灯片.
这是我当前的选项设置
$(window).load(function() { $('.home_slider').flexslider({ animation: "slide",//String: Select your animation type,"fade" or "slide" smoothHeight: false,//{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode slideshow: false,//Boolean: Animate slider automatically controlNav: false,directionNav: true,//Boolean: Create navigation for prevIoUs/next navigation? (true/false) prevText: "%",//String: Set the text for the "prevIoUs" directionNav item nextText: "&",// Carousel Options itemmargin: 40 });
解决方法
不是尝试将边距直接应用于LI元素,而是在每张幻灯片中包含另一个包裹图像的元素,然后将边距应用于它.
<div class="flexslider"> <ul class="slides"> <li><div class="slide-contents"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /></div></li> <li><div class="slide-contents"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /></div></li> <li><div class="slide-contents"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" /></div></li> </ul> </div>
然后在你的CSS中做这样的事情(假设你想要幻灯片之间的40px,在幻灯片的每一面添加20px:
.flexslider .slide-contents { margin: 0 20px; }
如果要保持滑块的左/右侧与页面内容的其余部分齐平,请在flexslider本身上添加负边距.
.flexslider { margin: 0 -20px; }
原文地址:https://www.jb51.cc/jquery/241386.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。