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
});
}
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 :).