如何使隱藏一個div的內容時，它的溢出到右邊

-1

我這上面的形象，我需要實現與CSS和JavaScript的效果;在我的頁面上，我允許用戶將最多12張圖片添加到他們的帳戶中，所有圖片將顯示在下面的div中。

如果用戶少於5張照片，紅色邊框的div將被隱藏，並且當用戶的照片超過5張時，帶有紅色邊框的div將顯示2個箭頭–一個在左側，另一個在右側–並點擊右箭頭照片將向左移動，直到它到達最後一張照片。

如何通過CSS和JavaScript實現這一目標？我試圖使用隱藏爲div的溢出，但我得到的不是我所需要的。

對此有任何幫助嗎？

我的HTML和CSS低於：

.mycarousel-container { 
 
    border: 1px solid red; 
 
    width: 650px; 
 
    min-height: 140px; 
 
    max-height: auto; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
    left: 0px; 
 
    z-index: 0; 
 
} 
 
#carousel_control_left { 
 
    float: left; 
 
    margin-top: 60px; 
 
    color: #b0b0b0; 
 
    font-size: 18px; 
 
} 
 
#carousel_control_right { 
 
    float: right; 
 
    margin-top: 60px; 
 
    color: #b0b0b0; 
 
    font-size: 18px; 
 
} 
 
.mycarousel { 
 
    border: 1px solid #ccc; 
 
    width: 102px; 
 
    height: 102px; 
 
    margin: 15px 15px 15px 4px; 
 
    float: left; 
 
    border-radius: 2px; 
 
}

<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div><small class="text-muted">This listing has 6 photos. Add up to 6 more for free.</small> 
 
    </div> 
 
    <div class="mycarousel-container" style="padding-left:0;padding-right:0;"> 
 
     <span id="carousel_control_left"><i class="glyphicon glyphicon-chevron-left"></i></span> 
 
     <span id="carousel_control_right"><i class="glyphicon glyphicon-chevron-right"></i></span> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

鏈接到jsFiddle

來源

2016-07-10 sam

請添加jsfiddle。 –

你忘了發佈你試過的JavaScript/jQuery。 –

@DavidThomas我必須嘗試不知道如何使這項工作，謝謝 – sam

我可以建議不加入這兩個箭頭，讓瀏覽器做的工作您？

只需在包含div上設置overflow-x: auto即可。這將啓用滾動功能，因此所有本機功能（例如雙指滑動）都可以按照用戶對其平臺所期望的方式工作。這是一個比用戶不希望的方式重新創建UI組件更好的解決方案。

來源

2016-07-10 16:59:04 Brad

如何使隱藏一個div的內容時，它的溢出到右邊

回答

相關問題