簡單的滑塊，寬度為100％

Question

我正在使用一個簡單的滑塊插件來創建一個報價欄，如下所示：

然后轉到下一張幻燈片：

就像這個“插件”一樣，但是問題是在我的情況下，滑塊的width必須為屏幕的100% （插件的固定width為500px ）：

http://codepen.io/zuraizm/pen/vGDHl

我嘗試將width: 100%添加到CSS slider ， ul和li ，但沒有運氣：

    #slider {
      position: relative;
      overflow: hidden;
      margin: 20px auto 0 auto;
      border-radius: 4px;
      width: 100% !important;
    }

    #slider ul {
      position: relative;
      margin: 0;
      padding: 0;
      height: 200px;
      list-style: none;
      width: 100% !important;
    }

    #slider ul li {
      position: relative;
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      width: 500px;
      height: 300px;
      background: #ccc;
      text-align: center;
      line-height: 300px;
      width: 100%;
    }

關於如何使其在width:100%起作用的任何想法width:100%像我的示例圖片一樣width:100% ？

Answer 1

滑塊元素還需要獲得100％的寬度：

#slider {
    width: 100%;
}

並且：

#slider ul li {
    width: 100%;
}

不要像在您的入門文章中一樣通過CSS將寬度值兩次分配給同一元素。 我已經在您的小提琴上嘗試過了，而且效果很好。

編輯：

並對JS進行一些調整，在“小提琴”中將第14-16行替換為：

$('#slider').css({ height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, height: slideHeight });

$('#slider ul li').css({ width: slideWidth }); 

http://codepen.io/anon/pen/viBHe

Answer 2

嘗試刪除position: relative; #slider並給他width: 100% ，因為全寬度取自父元素。 具有絕對，相對，固定位置的元素沒有父元素。 或者，您可以使用JQuery執行此操作。

Answer 3

因為這是一種滑動效果，所以無法添加width: 100%像這樣向li元素添加width: 100% 。 javascript將UL寬度調整為所有組合的滑塊項目的大小。 要進行這項工作，您要做的是

1. 您需要計算幻燈片的寬度（可能是瀏覽器窗口的大小或容器DIV的大小），然后使用javascript調整圖像的大小，並將slideWidth變量更改為新的寬度。

2. 如果您具有響應式布局，並且還需要滑塊也響應式，則必須在JQuery中創建一個函數來偵聽resize事件。 調整滑塊大小后，您需要將變量slideWidth更改為新的滑塊大小。