更改jquery的Supersized插件的高度和寬度

我正在使用Supersized jquery插件3.2.7爲網站創建滑塊。 Supersized的說明設置了滑塊的全屏實現，但我希望實際上使滑塊大約爲當前寬度的70％。根據Supersized網站，我應該可以通過更改滑塊的CSS選擇器來解決此問題，以便位置爲「絕對」而非相對。但是，當我做出這種改變 - 並縮小高度和寬度時，滑塊就會消失。我也嘗試過使用較小的圖片，而這似乎也無法解決問題。我希望有人可能對我缺少的東西有所瞭解。下面是CSS和HTML代碼。謝謝。更改jquery的Supersized插件的高度和寬度

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 

}); 

}

來源

2013-08-30 krishnab

你可以做小提琴嗎？我試圖從你的來源製作一個，但它似乎沒有做任何事情...... –

啊，我發現這個問題的答案題。他們在超級滑雪網站上的信息有點不完整。

要做的第一件事是更改supersized.css文件。將#supersized和#supersized li position屬性從fixed - > absolute更改。第二件事 - 在說明中省略 - 是更改#supersized和#supersized li屬性中的高度和/或寬度屬性，以反映您所需的新高度和寬度。

這最後一部分有點棘手，因爲它落在了繼承差距。該屬性必須在supersized.css中設置。在我的情況下，更改站點main.css中的滑塊高度和寬度屬性（這是我的CSS鏈接文件中的底部條目）不會影響此屬性，因爲框架沒有直接處理＃超級ID。所以，現在這個工作:)。

來源

2013-08-31 00:31:09 krishnab

更改jquery的Supersized插件的高度和寬度

回答

相關問題