更改jQuery的超大插件的高度和宽度

Question

I am using the Supersized jquery plugin 3.2.7 to create a slider for a website. The instructions for Supersized set up a full screen implementation of the slider, but I want to actually make the slider about 70% of the current width. According to the Supersized website, I should be able to fix this by changing the CSS selector for the slider so that the position is "absolute" instead of relative. However, when I make that change--and shrink the height and width--the slider simply disappears. I have tried using smaller pictures too, and that does not seem to fix the issue either. I was hoping someone might have an idea of what I am missing. The CSS and the HTML code are below. Thanks.

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

...

The HTML is:

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

The Javascript is:

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

});

}

Answer 1

Ahh, I found the answer to this question. They information on the superslider website was a bit incomplete.

The first thing to do is change the supersized.css file. Change the #supersized and #supersized li position property from fixed -> absolute. The second thing to do--omitted in the instructions--is to change the height and or width properties in the #supersized and #supersized li properties to reflect your new desired height and width.

This last part was a bit tricky, because it falls through the inheritance gap. The property has to be set in the supersized.css. In my case, changing the slider height and width properties in the site main.css--which was the bottom entry in my CSS link files, did not affect this property, as the framework did not directly address the #supersized id. So, this works now :).