在响应滑块（jQuery循环）中设置高度

我正在使用jQuery Cycle制作一些幻灯片，其内容低于它。 jQuery Cycle将父项设置为相对，并将子项幻灯片设置为绝对，因此应覆盖它下面的内容。通常，我会给父容器一个高度来解决我的问题。在响应滑块（jQuery循环）中设置高度

由于布局响应，高度可能会发生变化。那里有一个简单的解决方案吗？

编辑：

这里是清盘这样做对我来说：

$(window).load(function(){ 

    var rotate_height = $('#rotate div img').height(); 
    $('#rotate').css('height', rotate_height); 

    $(window).resize(function() { 
     if($(window).width() >= 960){ 
      rotate_height = 290; 
      $('#rotate').css('height', rotate_height); 
      $('#rotate').cycle('next'); 
     } else if ($(window).width() >= 768 && $(window).width() <= 959) { 
      rotate_height = 230; 
      $('#rotate').css('height', rotate_height); 
      $('#rotate').cycle('next'); 
     } else if ($(window).width() >= 480 && $(window).width() <= 767) { 
      rotate_height = 210; 
      $('#rotate').css('height', rotate_height); 
      $('#rotate').cycle('next'); 
     } else if ($(window).width() <= 479) { 
      rotate_height = 150; 
      $('#rotate').css('height', rotate_height); 
      $('#rotate').cycle('next'); 
     } 
    }); 

    $('#rotate').cycle({ 
     fx: 'fade', 
     fit: 1, 
     containerResize: 0, 
     slideResize: 0, 
     height: rotate_height  
    }); 
});

周期（“下一步”）强制滑动到下一个访问者重新调整他们的显示器之后。不理想，但只有在幻灯片更改后，图像才会缩小。

来源

2012-02-27 Chords

一些示例代码将是有益的。 – Starx 2012-02-27 04:37:34

很高兴概念上的'微动'足以引导你找到解决方案！ – deefour 2012-02-27 16:03:18

您可以使用ready和resize事件触发将设置适当的基础上，window的width的height的功能。当页面响应当前窗口宽度时，您的jQuery方法将适当地调整幻灯片父级的高度。

来源

2012-02-27 04:32:07 deefour

我认为你可以这样做：

$slideshow.cycle({ 
    containerResize: false, 
    slideResize: false, 
    fit: 1 
});

基本上，当调整窗口大小，滑动容器被迫调整。（不知道是否应该将所有真或假，请试试看）

来源

2012-02-27 04:44:13

没有骰子，谢谢！ – Chords 2012-02-27 05:54:34

我已在类似项目中使用此代码，但仍无法使用。 – JGallardo 2013-06-10 23:21:51

我有同样的问题，解决了这个问题是这样的：

HTML：

<div class="hp_slider"> 
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/17dd0cc96316523cbba09777c8e512769078b0bc.png" /></a> 
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/39fbcef502bd01b7f13980a81b73f6e6cb5491b6.jpg" /></a> 
</div>

CSS ：

.hp_slider {margin-bottom:49%; width:100%; height:auto;} 
.hp_slider img {width:100%; height:auto;}

的jQuery：

$(document).ready(function() { 
$('.hp_slider').cycle({ 
fx: 'fade', 
containerResize: false, 
slideResize: false, 
fit: 1 
}); 
});

这有点脏，但边距以百分比形式将文本从滑块后面向下推，并将其保持在不同的大小，以便它仍然响应。

来源

2012-07-26 21:34:12 iamhyphenated

这是我的解决方案：

$(window).resize(function(){ 
    $('.cycle-container').each(function(){  
     $(this).height($(this).find('> *:first').outerHeight()); 
    }) 
});

来源

2013-06-09 17:22:01

在响应滑块（jQuery循环）中设置高度

回答

相关问题