Question

我使用此代码将产品显示为滑块。

.omid-product-main{
direction: rtl;
width: calc(100% + 16px);
display: flex;
overflow-x: auto;
padding: 10px 5px 10px 0;
overflow-y: hidden;
scroll-behavior: smooth;
}
.omid-product-last{
float: right;
position: relative;
flex: 0 0 250px;
width: 250px;
height: 200px;
margin: 3px;
background: red;
color:white;
}

<div class="omid-product-main">
  <div class="omid-product-last">1</div>
  <div class="omid-product-last">2</div>
  <div class="omid-product-last">3</div>
  <div class="omid-product-last">4</div>
  <div class="omid-product-last">5</div>
  <div class="omid-product-last">6</div>
  <div class="omid-product-last">7</div>
  <div class="omid-product-last">7</div>
</div>

好吧，此滑块非常适合移动用户。但是对于台式机用户来说，水平滚动看起来不太好。

Slider in desktop mode

喜欢图片。我想添加左右滚动按钮。通过减小页面的宽度，显示的项目数将减少，并且项目的宽度不会缩小。并且在同一当前特征的小于768像素之内。

有人可以帮忙吗？

适用于台式机和移动用户的简单产品/帖子滑块

0 个答案: