2017-08-15 47 views
-1

我有我的滑塊的問題,在JS的寬度設置爲1366,但我試圖將其更改爲自動,但它不會工作。我怎麼能做到這一點?該網站上開設寬屏幕時,寬度一致,併除滑塊一切都很好的問題,它不調整設置滑塊widtth自動在JS CSS

effectsDemo2 = 'rain,stairs,fade'; 
 
var demoSlider_2 = Sliderman.slider({ 
 
    container: 'SliderName_2', 
 
    width: 1366, 
 
    height: 630, 
 
    effects: effectsDemo2, 
 
    display: { 
 
    autoplay: 3000, 
 
    loading: { 
 
     background: '#000000', 
 
     opacity: 0.5, 
 
     image: 'img/loading.gif' 
 
    }, 
 
    buttons: { 
 
     hide: true, 
 
     opacity: 1, 
 
     prev: { 
 
     className: 'SliderNamePrev_2', 
 
     label: '' 
 
     }, 
 
     next: { 
 
     className: 'SliderNameNext_2', 
 
     label: '' 
 
     } 
 
    }, 
 
    description: { 
 
     hide: true, 
 
     background: '#000000', 
 
     opacity: 0.4, 
 
     height: 50, 
 
     position: 'bottom' 
 
    }, 
 
    navigation: { 
 
     container: 'SliderNameNavigation_2', 
 
     label: '<img src="img/clear.gif" />' 
 
    } 
 
    } 
 
});
<div id="SliderName_2" class="SliderName_2"> 
 
    <img src="img/1.jpg" usemap="#img1map" /> 
 
    <map name="img1map"> 
 
\t \t \t \t \t \t <area href="#img1map-area1" shape="rect" coords="100,100,200,200" /> 
 
\t \t \t \t \t \t <area href="#img1map-area2" shape="rect" coords="300,100,400,200" /> 
 
\t \t \t \t \t </map> 
 
    <div class="SliderName_2Description"></div> 
 
    <img src="img/2.jpg" /> 
 
    <div class="SliderName_2Description"></div> 
 
    <img src="img/3.jpg" /> 
 
    <div class="SliderName_2Description"></div> 
 
    <img src="img/4.jpg" /> 
 
    <div class="SliderName_2Description"></div> 
 
</div> 
 
<div class="c"></div> 
 
<div id="SliderNameNavigation_2"></div> 
 
<div class="c"></div>

+1

工作,沒有一個功能演示顯示哪個幻燈片插件,您正在使用,所有的相關的CSS和圖像,我們不能幫助。我建議閱讀滑塊插件的文檔,以瞭解如何響應地實現滑塊。 –

+0

嘗試將它放在一個容器上,並將容器設置爲xx%寬度,在該容器內將滑塊的寬度設置爲100% –

+0

這就是我正在使用的滑塊http://www.devtrix.net/sliderman/ –

回答

0

如果你正在使用的插件滑塊支持寬度值爲'100%',則可以傳遞此值並將滑塊包裝到另一個HTML元素中。然後在HTML元素上應用CSS並使用媒體查詢來相應地縮放到視口寬度。

下面的代碼沒有進行測試,但應該爲你的問題

HTML

<div class="sliderWrapper"> 
    ... Your slider code 
</div> 

CSS

.sliderWrapper { 
    width: 350px 
} 

@media (min-width: 769px) { 
    .sliderWrapper { 
     width: 700px 
    } 
}