全寬圖像滑塊

Question

我想從零開始做一個全寬滑塊，但我現在卡在圖像寬度爲100％

我有一個滑塊是100％寬度和溢出：隱藏，裏面的ul是10000px寬度。這就是爲什麼我不能把圖像100％的寬度。請幫忙！ 這裏是我的pen

<div id="slider" class="slider"> 
    <ul class="content-slides"> 
    <li class="slides"> 
     <img src="img1.jpg" alt=""> 
     <div> 
     <h1>lorem ipsum dolem</h1> 
     <p>paragraph</p> 
     </div> 
    </li> 
    <li class="slides"> 
     <img src="img2.jpg" alt=""> 
     <div> 
     <h1>lorem ipsum dolem</h1> 
     <p>paragraph</p> 
     </div> 
    </li> 
    <li class="slides"> 
     <img src="img3.jpg" alt=""> 
     <div> 
     <h1>lorem ipsum dolem</h1> 
     <p>paragraph</p> 
     </div> 
    </li> 
    </ul> 
    <div id="slider_nav"></div> 
</div> 

這裏是我的CSS

ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
.slider { 
    width: 100%; 
    /*width: 600px;*/ 
    /*height: 300px; 
    margin: 100px auto 0;*/ 
    overflow: hidden; 
    position: relative; 
} 
.slider .content-slides { 
    width: 10000px; 
} 
.content-slides .slides { 
    float: left; 
    position: relative; 
} 
.content-slides img { 
    width: 100%; 
} 
.content-slides div { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    text-align: center; 
    z-index: 99; 
    color: #fff; 
} 
#slider_nav { 
    position: absolute; 
    z-index: 100; 
    top: 40%; 
    right: 10px; 
} 
#slider_nav li { 
    padding: 4px; 
    border: 1px solid #fff; 
    margin: 20px 0; 
    border-radius: 50%; 
    cursor: pointer; 
} 
#slider_nav li span { 
    display: block; 
    width: 5px; 
    height: 5px; 
    border-radius: 50%; 
} 
#slider_nav li span.active { 
    background: #fff; 
} 

任何幫助是要理解

Answer 1

您可以使用視口的高度和寬度。我創建了一個code pen。希望對你有效。

.slider .content-slides { 
    width: 300vw; 
} 
.content-slides .slides { 
    float: left; 
    position: relative; 
} 
.content-slides img { 
    width: 100vw; 
} 

在JS -

'margin-left': -(pos * Math.max(document.documentElement.clientWidth, window.innerWidth || 0))