Как я могу преобразовать html изображений в слайдер, если размер экрана меньше 600 пикселей? - PullRequest
Новая
       10

Как я могу преобразовать html изображений в слайдер, если размер экрана меньше 600 пикселей?

0 голосов
/ 05 апреля 2020

Итак, я создаю веб-страницу, и у меня есть три изображения, выровненные рядом друг с другом:

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%; 
}

На рабочем столе я хочу держать три изображения рядом друг с другом, но когда на мобильном телефоне я хочу, то в слайдер.

Ответы [ 3 ]

0 голосов
/ 06 апреля 2020

Простое решение - создать два элемента и отобразить первый, если ширина страницы> 600 пикселей. В противном случае вы отображаете другой. 

<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, чтобы сделать свой слайдер.

0 голосов
/ 06 апреля 2020

Если экран меньше 600 пикселей, три изображения отображаются одно под другим. Все изображения размером более 600 пикселей размещены рядом.

Надеюсь, это то, что вы ищете ... 

.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/stackoverflow.jpg" alt="" style="width:100%;">
   </div>
     <div class="column">
    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
   </div>
     <div class="column">
    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
   </div>
</div>
0 голосов
/ 05 апреля 2020

Вы пытались использовать display: flex; и медиа-запрос с минимальным-максимальным?

...