让 jQuery 循环插件响应布局像素？答案

【问题标题】：Making a jQuery cycle plugin become responsive to the layout pixels?让 jQuery 循环插件响应布局像素？
【发布时间】：2013-07-26 06:57:34
【问题描述】：

这是我的幻灯片标记。正如您在我的样式表中看到的那样，我明确指定了幻灯片的高度，但我真的很想避免这种情况，这样当我将浏览器放大或缩小时，幻灯片的大小也会发生变化。

<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>

这是我的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>';
    };
});

还有我的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%;
}

非常感谢任何帮助

【问题讨论】：

你能修正这句话吗？：“我真的不想有高度或幻灯片放映。” 这没有意义，我不知道你是什么'想说。
试试这个bluebit.co.uk/blog/Using_jQuery_Cycle_in_a_Responsive_Layout

标签： jquery jquery-cycle

【解决方案1】：

我已经这样解决了这个问题：

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
    });
});

});

【讨论】：

【解决方案2】：

试试这个：

$('.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
});

【讨论】：

【解决方案3】：

您还需要为 .sliderImage 类设置 max-width: 100%。那应该可以解决问题。请记住，您需要足够大的图像，并且循环容器的高度仍然是固定值。

这是添加了 max-width: 100% css 属性的示例： http://jsfiddle.net/vfonic/YH5je/

【讨论】：

这有帮助 - 但是当窗口被调整大小时它不起作用，因为 JQuery Cycle 将固定的高度和宽度作为内联样式添加到图像。

【解决方案4】：

只需添加一个具有最大宽度的虚拟图像，如下所示：

http://www.bluebit.co.uk/blog/Using_jQuery_Cycle_in_a_Responsive_Layout

这是一个例子：

http://dev.bluebit.co.uk/mark/cycle/index-basic.html

我想有人已经告诉过你了。

【讨论】：

【解决方案5】：

您可以使用新版本的 JQuery Cycle 插件 v.2

http://jquery.malsup.com/cycle2/

默认支持响应式。

【讨论】：