Как изменить порядок элементов на мобильных устройствах так, чтобы первый элемент стал вторым?

  • 30 августа 2023 г. 8:57
Ответы на вопрос 2
Чтобы изменить порядок элементов на мобильных устройствах, можно использовать CSS свойство `flex-direction`. Ниже приведен пример:

HTML код:
```html
<div class="container">
  <div class="item">Первый элемент</div>
  <div class="item">Второй элемент</div>
  <div class="item">Третий элемент</div>
</div>
```

CSS код:
```css
.container {
  display: flex;
  flex-direction: row;
}

.item {
  width: 100px;
  height: 100px;
}

@media (max-width: 520px) {
  .container {
    flex-direction: column;
  }
}
```

В приведенном примере элементы располагаются горизонтально (по умолчанию), но при разрешении меньше 520 пикселей они будут располагаться вертикально.

Чтобы сделать слайдер сдвигающимся вправо на один элемент при разрешении меньше 520 пикселей, можно использовать JavaScript или библиотеку JavaScript, такую как jQuery. Пример с использованием jQuery:

HTML код:
```html
<div class="slider">
  <div class="item">Первый элемент</div>
  <div class="item">Второй элемент</div>
  <div class="item">Третий элемент</div>
</div>
```

CSS код:
```css
.slider {
  display: flex;
  overflow-x: hidden;
}

.item {
  width: 100px;
  height: 100px;
}

@media (max-width: 520px) {
  .slider {
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }
  
  .item {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
}
```

JavaScript код с использованием jQuery:
```javascript
$(document).ready(function() {
  var $slider = $('.slider');
  
  $(window).on('resize', function() {
    var windowWidth = $(window).width();
    if (windowWidth < 520) {
      $slider.scrollLeft($('.item:first-child').width());
    } else {
      $slider.scrollLeft(0);
    }
  });
});
```

В приведенном примере, при разрешении меньше 520 пикселей, слайдер будет сдвигаться вправо на ширину первого элемента, чтобы первый элемент стал вторым и располагался по центру. Крайние левый и правый элементы будут заблюрены и первый элемент будет находиться в центре.
Если у вас есть свайпер, то вы можете использовать настройку `centeredSlides: true` для центрирования слайдов.
Похожие вопросы