使 jQuery 循环插件能够响应布局像素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7003290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a jQuery cycle plugin become responsive to the layout pixels?
提问by okMonty
This is my markup for a slideshow. As you can see in my stylesheet I am specifying the slideshow's height explicitly, but I would really like to avoid this, so that when I make the browser larger or smaller the slideshow size changes as well.
这是我的幻灯片标记。正如您在我的样式表中所看到的，我明确指定了幻灯片的高度，但我真的很想避免这种情况，因此当我将浏览器放大或缩小时，幻灯片大小也会发生变化。
<section class="contentSlider">
<section class="contentSliderControls">
<a href="#" class="controlPrev">Prev</a>
<a href="#" class="controlNext">Next</a>
<ul class="controlSlides"></ul>
</section>
<ul class="slides">
<li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
<li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
<li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
<li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
<li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
<li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
<li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
<li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
</ul>
This is my javascript
这是我的javascript
$(function() {
$('.slides').cycle({
fx: 'scrollHorz',
timeout: 0,
prev: '.contentSliderControls > .controlPrev',
next: '.contentSliderControls > .controlNext',
pager: '.contentSliderControls > .controlSlides',
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(idx, slide) {
return '<li><a href="#">'+(idx+1)+'</a></li>';
};
});
and my css
和我的 css
/* Content Slider */
.contentSlider {
position: relative;
}
.contentSlider, .contentSlider > .slides {
height: 504px;
}
.controlSlides > li {
float: left;
}
.contentSlider > .slides {
z-index: 1;
}
.sliderImage {
width: 100%;
}
.contentSliderControls {
height: 504px;
position: absolute;
width: 100%;
z-index: 2;
}
.contentSliderControls > .controlPrev {
background-color: #ffffff;
color: #000000;
display: block;
float:left;
height: 504px;
opacity: .5;
width: 10%;
}
.contentSliderControls > .controlNext {
background-color: #ffffff;
color: #000000;
display: block;
float:right;
height: 504px;
opacity: .5;
width: 10%;
}
Any help is greatly appreciated
任何帮助是极大的赞赏
回答by
I've solved this problem like this:
我已经解决了这个问题：
var activeSlide;
$(document).ready(function() {
$('.cycle').cycle({
containerResize: 1,
width: 'fit',
after: function(curr, next, obj) {
activeSlide = obj.currSlide;
}
});
$(window).resize(function(){
$('.cycle').cycle('destroy');
$('.cycle').each(function(){
newWidth = $(this).parent('div').width();
$(this).width(newWidth);
$(this).height('auto');
$(this).children('div').width(newWidth);
$(this).children('div').height('auto');
});
$('.cycle').cycle({
containerResize: 1,
width: 'fit',
after: function(curr, next, obj) {
activeSlide = obj.currSlide;
},
startingSlide: activeSlide
});
});
});
回答by steve
Try this:
尝试这个：
$('.slides').cycle({
fx: 'scrollHorz',
timeout: 0,
prev: '.contentSliderControls > .controlPrev',
next: '.contentSliderControls > .controlNext',
pager: '.contentSliderControls > .controlSlides',
pagerAnchorBuilder: pagerFactory,
slideResize: true,
containerResize: false,
width: '100%',
fit: 1
});
回答by Viktor Fonic
You would need to set max-width: 100% as well for your .sliderImage class. That should fix the problem. Keep in mind that you need big enough image and that the height of the cycle container is still fixed value.
您还需要为 .sliderImage 类设置 max-width: 100% 。那应该可以解决问题。请记住，您需要足够大的图像，并且循环容器的高度仍然是固定值。
Here's your example with max-width: 100% css attribute added: http://jsfiddle.net/vfonic/YH5je/
这是您的最大宽度示例：添加了 100% css 属性：http: //jsfiddle.net/vfonic/YH5je/
回答by Narayon
Just add a dummy image with your max width, like this:
只需添加一个最大宽度的虚拟图像，如下所示：
http://www.bluebit.co.uk/blog/Using_jQuery_Cycle_in_a_Responsive_Layout
http://www.bluebit.co.uk/blog/Using_jQuery_Cycle_in_a_Responsive_Layout
Here's an example:
下面是一个例子：
http://dev.bluebit.co.uk/mark/cycle/index-basic.html
http://dev.bluebit.co.uk/mark/cycle/index-basic.html
I guess someone already told you this.
我想这已经有人告诉过你了。
回答by HEX
You can use new version JQuery Cycle plugin v.2
您可以使用新版本的 JQuery Cycle 插件 v.2
http://jquery.malsup.com/cycle2/
http://jquery.malsup.com/cycle2/
It supports responsive by default.
它默认支持响应式。
