当显示小于 600 像素时，如何将 html 个图像更改为滑块？

Question

所以我正在设计一个网页，并且我有三个图像并排排列：

html :

<div id="imgs">
  <img src="img/img_2.jpg" alt="">
  <img src="img/img_1.jpg" alt="">
  <img src="img/img_0.jpg" alt="">
</div>

css :

#imgs img { 
   width: 29%; 
   margin: 1.5%; 
}

在台式机上，我想将三张图片并排放置，但在移动设备上，我想放在一个滑块中。

Answer 1

您是否尝试过使用 display: flex; 和具有 min-max 的媒体查询？

Answer 2

一个简单的解决方案是制作两个元素，如果页面宽度 > 600px，则显示第一个元素。否则你显示另一个。

<div id="imgs-flex">
  <img src="img/img_2.jpg" alt="">
  <img src="img/img_1.jpg" alt="">
  <img src="img/img_0.jpg" alt="">
</div>
<div id="img-mobile">
  <img src="img/img_2.jpg" alt="">
  <img src="img/img_1.jpg" alt="">
  <img src="img/img_0.jpg" alt="">
</div>

然后在 CSS 中：

#img-flex{
  display: flex;
}
#img-mobile{
  display: none;
}

/* You use Media Queries for the responsive */
@media screen and (max-width: 600px){
   #img-mobile{
      display: block;
   } 
   #img-flex{
      display: none;
   }
}

然后添加 Javascript 来做滑块。

Answer 3

如果屏幕小于 600px，则三张图片会依次显示。大于600px的都是并排放置的图片。

我希望这就是您正在寻找的...

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 50%; /* for fullscreen take 100% */
  }
}

<div class="row"> 
  <div class="column">
    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/Whosebug.jpg" alt="" style="width:100%;">
   </div>
     <div class="column">
    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/Whosebug.jpg" alt="" style="width:100%">
   </div>
     <div class="column">
    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/Whosebug.jpg" alt="" style="width:100%">
   </div>
</div>

当显示小于 600 像素时，如何将 html 个图像更改为滑块？

How can I change html images into a slider when the display with is under 600px?

html

javascript

css

responsive-design