Javascript 更改jquery超大插件的高度和宽度
我正在使用超大jquery插件3.2.7为网站创建一个滑块。“超大”的说明设置了滑块的全屏实现,但我想实际使滑块的宽度为当前宽度的70%。根据超大型网站的说法,我应该能够通过更改滑块的CSS选择器来解决这个问题,从而使位置是“绝对”的,而不是相对的。然而,当我做出改变——并缩小高度和宽度——滑块就会消失。我也尝试过使用较小的图片,但这似乎也不能解决问题。我希望有人能知道我错过了什么。下面是CSS和HTML代码。谢谢 CSS: HTML是:Javascript 更改jquery超大插件的高度和宽度,javascript,jquery,html,css,supersized,Javascript,Jquery,Html,Css,Supersized,我正在使用超大jquery插件3.2.7为网站创建一个滑块。“超大”的说明设置了滑块的全屏实现,但我想实际使滑块的宽度为当前宽度的70%。根据超大型网站的说法,我应该能够通过更改滑块的CSS选择器来解决这个问题,从而使位置是“绝对”的,而不是相对的。然而,当我做出改变——并缩小高度和宽度——滑块就会消失。我也尝试过使用较小的图片,但这似乎也不能解决问题。我希望有人能知道我错过了什么。下面是CSS和HTML代码。谢谢 CSS: HTML是: <!-- Homepage Slider --
<!-- Homepage Slider -->
<div id="home-slider">
<div class="overlay"></div>
<div class="slider-text">
<div id="slidecaption"></div>
</div>
<div class="control-nav">
<a id="prevslide" class="load-item"><i class="font-icon-arrow-simple-left"></i></a>
<a id="nextslide" class="load-item"><i class="font-icon-arrow-simple-right"></i></a>
<ul id="slide-list"></ul>
<a id="nextsection" href="#work"><i class="font-icon-arrow-simple-down"></i></a>
</div>
</div>
啊,我找到了这个问题的答案。他们认为超级滑翔机网站上的信息有点不完整 首先要做的是更改supersized.css文件。将#supersized和#supersized li position属性从fixed->absolute更改。第二件事是更改#supersized和#supersized li属性中的height和/或width属性,以反映新的所需高度和宽度(在说明中省略)
最后一部分有点棘手,因为它跨越了继承的鸿沟。必须在supersized.css中设置该属性。在我的例子中,更改site main.css中的滑块高度和宽度属性(它是我的css链接文件中的底部条目)不会影响此属性,因为框架没有直接处理#超大id。因此,现在可以这样做:)。你能做个小动作吗?我试着从你的资料中做一个,但似乎没有任何作用。。。
<!-- Homepage Slider -->
<div id="home-slider">
<div class="overlay"></div>
<div class="slider-text">
<div id="slidecaption"></div>
</div>
<div class="control-nav">
<a id="prevslide" class="load-item"><i class="font-icon-arrow-simple-left"></i></a>
<a id="nextslide" class="load-item"><i class="font-icon-arrow-simple-right"></i></a>
<ul id="slide-list"></ul>
<a id="nextsection" href="#work"><i class="font-icon-arrow-simple-down"></i></a>
</div>
</div>
BRUSHED.slider = function(){
$.supersized({
// Functionality
slideshow: 1, // Slideshow on/off
autoplay: 1, // Slideshow starts playing automatically
start_slide: 1, // Start slide (0 is random)
stop_loop: 0, // Pauses slideshow on last slide
random: 0, // Randomize slide order (Ignores start slide)
slide_interval: 12000, // Length between transitions
transition: 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, . . .
transition_speed:300, // Speed of transition
new_window: 1, // Image links open in new window/tab
pause_hover: 0, // Pause slideshow on hover
keyboard_nav:1, // Keyboard navigation on/off
performance: 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image
image_protect:1, // Disables image dragging and right click with Javascript
// Size & Position
min_width: 0, // Min width allowed (in pixels)
min_height: 0, // Min height allowed (in pixels)
vertical_center: 1, // Vertically center background
horizontal_center: 1, // Horizontally center background
fit_always: 1, // Image will never exceed browser width
fit_portrait:1, // Portrait images will not exceed browser height
fit_landscape: 0, // Landscape images will not exceed browser width
// Components
slide_links: 'blank', // Individual links for each slide (Options: false, 'num'
thumb_links: 0, // Individual thumb links for each slide
thumbnail_navigation: 0, // Thumbnail navigation
slides: [ // Slideshow Images
{image : '_include/img/slider-images/image01.jpg' . . . ''},
{image : '_include/img/slider-images/image02.jpg' . . . ''},
{image : '_include/img/slider-images/image03.jpg',. . . ''},
],
// Theme Options
progress_bar: 0, // Timer for each slide
mouse_scrub: 0
});
}