我刚刚带来了一个 jquery slider 控件,它说它是响应式的,但在演示中它是响应式的,我只是想不通它是如何或是什么让它响应式的,我复制了那里的代码,它只是位于我的页面中固定宽度。
所以我知道可以解决这个问题的唯一解决方案是获取#seven_container 的父元素宽度并将其用作 window.resize 的指南并更改控件的宽度和高度属性,例如.seven_container 可能需要另一个父 div 来添加和删除内容
var tb=$(".seven_container").superseven({
width:723,
height:425
});
有谁知道如何使用图像的实际宽度并计算 $('.seven_container') 父级的纵横比
他们jquery如下
var tb=$(".seven_container").superseven({
width:723,
height:425,
autoplay:true,
interval:5,
fullwidth:false,
responsive:true,
progressbar:true,
swipe:true,
keyboard:false,
scrollmode:false,
animation:0,
navtype:0,
repeat_mode:true,
skin:'default',
lightbox:true,
pause_on_hover:true
});
这是标记
<div class="seven_container">
<div id="seven_viewport">
<div class="seven_slider">
<div class="seven_slide" image-src="images/vivo_slider/make_me_over_package.png"></div>
<div class="seven_slide" image-src="images/vivo_slider/regrowth_color_package.png"></div>
<div class="seven_slide" image-src="images/vivo_slider/global_color_package.png"></div>
<div class="seven_slide" image-src="images/vivo_slider/half_head_foils_package.png"></div>
<div class="seven_slide" image-src="images/vivo_slider/balayage_color_package.png"></div>
<div class="seven_slide" image-src="images/vivo_slider/highlights_color_package.png"></div>
<div class="seven_slide" image-src="images/vivo_slider/full_heads_foil_package.png"></div>
<div class="seven_slide" image-src="images/vivo_slider/new_client_hair_offer_package.png"></div>
</div>
</div>
<a id="left_btn" class="seven_nav">Previous Slide</a>
<a id="right_btn" class="seven_nav right_btn">Next Slide</a>
</div>
最佳答案
仅作为测试。尝试改用此 Javascript。
$(document).ready(function(){
var tb=$(".seven_container").superseven({
width:774,
height:436,
caption_animation: 2,
fullwidth:true,
animation:0,
autoplay:true,
interval:3,
progressbar:true,
progressbartype:"linear",
bullet:true,
thumbnail:false,
repeat_mode:true,
responsive:true,
swipe:true,
keyboard:true,
skin:"clean",
lightbox:true
});
});
关于javascript - 基于图像实际宽度的响应式 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21393090/