讓jQuery循環插件變得對佈局像素做出響應？

這是我的幻燈片標記。正如你在我的樣式表中看到的，我明確地指定了幻燈片的高度，但我真的很想避免這種情況，所以當我使瀏覽器變大或變小時，幻燈片的大小也會改變。讓jQuery循環插件變得對佈局像素做出響應？

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

任何幫助是極大的讚賞

來源

2011-08-09 okMonty

你能修復這句話嗎？：_「我真的不想有一個高度或幻燈片放映。」_這是沒有意義的，我不知道你想說什麼。 – Sparky

試試這個http://www.bluebit.co.uk/blog/Using_jQuery_Cycle_in_a_Responsive_Layout –

您需要設置最大寬度：100％爲好爲您的.sliderImage類。這應該解決問題。請記住，您需要足夠大的圖像，並且循環容器的高度仍然是固定值。

這裏有最大寬度的例子：100％的CSS屬性補充說： http://jsfiddle.net/vfonic/YH5je/

來源

2011-09-19 11:58:12

這會有所幫助 - 但是當窗口大小調整爲JQuery Cycle的時候，它將無法正常工作。 – Nick

我有一個類似的問題。我發現，在

http://forum.jquery.com/topic/integrate-cycle-plugin-in-a-responsive-layout-using-media-queries

希望這有助於爲我工作的解決方案。 jQuery Cycle插件按預期調整大小。

來源

2012-05-04 21:24:08 soulia

這是一個非常好的解決方案。 – Luke

我已經解決了這個問題是這樣的：

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

});

來源

2012-06-12 20:40:09 ghepting

試試這個：

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

來源

2012-07-23 23:04:53 steve