On my web page, currently, project products are listed vertically, row by row.
I want to display them vertically in a scrollable way.
How to change it to horizontal?
div class="row">
<div class="col-12">
<div class="tab-content tab-animate-zoom">
<!-- Start Single Tab Item -->
<div class="tab-pane show active" id="fruits">
<div class="default-slider default-slider--hover-bg-red product-default-slider">
<div class="product-default-slider-4grid-2rows gap__col--30 gap__row--40"> @foreach (var item in Model.CakesVM) {
<!-- Start Single Default Product -->
<div class="product__box product__default--single text-center">
<!-- Start Product Image -->
<div class="product__img-box pos-relative">
<a href="#" class="product__img--link">
<img class="product__img img-fluid" src="~/@Html.DisplayFor(modelItem => item.ProductPicture)" alt="">
</a>
<!-- Start Product Action Link-->
<ul class="product__action--link pos-absolute">
<li>
<a href="@Url.Action(" addToCart", new { id=item.ID })" data-toggle="modal">
<i class="icon-shopping-cart"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-heart"></i>
</a>
</li>
</ul>
<!-- End Product Action Link -->
</div>
<!-- End Product Image -->
<!-- Start Product Content -->
<div class="product__content m-t-20">
<a href="product-single-default.html" class="product__link">@Html.DisplayFor(modelItem => item.ProductName)</a>
<div class="product__price m-t-5">
<span class="product__price">$@Html.DisplayFor(modelItem => item.ProductPrice)</span>
</div>
</div>
<!-- End Product Content -->
</div>
<!-- End Single Default Product --> }
</div>
</div>
</div>
<!-- End Single Tab Item -->
</div>
</div>
</div>
This is the current example view, with items loading vertically.
P粉3842444732024-04-06 00:06:55
I've added a still image for your reference.
.product-default-slider {
overflow-x: scroll;
white-space: nowrap;
width: 100%;
scrollbar-width: thin;
scrollbar-color: gray lightgray;
}
.product-default-slider::-webkit-scrollbar {
height: 8px;
}
.product-default-slider::-webkit-scrollbar-thumb {
background-color: gray;
border-radius: 4px;
}
.product-horizontal-slider {
display: flex;
flex-wrap: nowrap;
}
.product__box {
flex: 0 0 auto;
margin-right: 10px;
}