0

我正在使用 Supersized jquery 插件 3.2.7 为网站创建滑块。Supersized 的说明设置了滑块的全屏实现，但我希望实际使滑块约为当前宽度的 70%。根据 Supersized 网站，我应该能够通过更改滑块的 CSS 选择器来解决此问题，以便位置是“绝对”而不是相对。但是，当我进行更改并缩小高度和宽度时，滑块就会消失。我也尝试过使用较小的图片，但这似乎也不能解决问题。我希望有人可能知道我错过了什么。CSS 和 HTML 代码如下。谢谢。

CSS：

#home-slider {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}

#home-slider .slider-text {
position: absolute;
left: 50%;
top: 70%;
margin: -10px 0 0 -585px;
width: 1170px;
height: 150px;
text-align: left;
z-index: 2; 
}
#home-slider .slide-content {
font-size: 60px;
color: #FFFFFF;
letter-spacing: -3px;
text-transform: uppercase;  
}
#home-slider .control-nav {
position: absolute;
width: 100%;
background: #2F3238;
height: 50px;
bottom: 0;
z-index: 2;
}

...

HTML 是：

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

Javascript是：

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

});

}
4

1 回答 1

0

啊，我找到了这个问题的答案。他们在 superslider 网站上的信息有点不完整。

首先要做的是更改 supersized.css 文件。将 #supersized 和 #supersized li 位置属性从固定 -> 绝对更改。要做的第二件事——在说明中省略——是更改 #supersized 和 #supersized li 属性中的 height 和/或 width 属性，以反映您新的所需高度和宽度。

最后一部分有点棘手，因为它跨越了继承鸿沟。该属性必须在 supersized.css 中设置。在我的例子中，更改站点 main.css（我的 CSS 链接文件中的底部条目）中的滑块高度和宽度属性不会影响此属性，因为框架没有直接处理 #supersized id。所以，这现在有效:)。

于 2013-08-31T00:31:09.607 回答