Для того чтобы использовать SwiperJS с слайдами разной высоты и установить адаптивную высоту слайдера на мобильных устройствах, следуйте этим шагам:
1. Установите SwiperJS на ваш проект. Вы можете сделать это с помощью npm:
```shell
npm install swiper
```
2. Импортируйте Swiper из установленного модуля:
```javascript
import Swiper from 'swiper';
```
3. Настройте инициализацию слайдера с параметрами, включая `autoHeight` и `normalizeSlideIndex`. Пример:
```javascript
const mySwiper = new Swiper('.swiper-container', {
autoHeight: true,
normalizeSlideIndex: true,
// Дополнительные параметры настройки
});
```
4. Далее, вам нужно установить CSS-правила для того, чтобы каждый слайд имел свою высоту. Вы можете это сделать с помощью класса слайда или индивидуальных стилей для каждого слайда. Например, вы можете добавить класс `swiper-slide-custom` к каждому слайду и использовать следующий CSS:
```css
.swiper-slide-custom {
height: auto; /* авто высота для всех устройств */
overflow-y: auto; /* добавьте прокрутку, если содержимое слайда не помещается */
}
```
5. Наконец, чтобы ваш сайт прокручивался нормально во всех разрешениях, убедитесь, что у родительского элемента, содержащего слайдер, установлено свойство `overflow: auto` или `overflow: hidden` в зависимости от ваших потребностей.
```css
.parent-container {
overflow: auto; /* или overflow: hidden */
}
```
Теперь у вас должен быть SwiperJS слайдер с адаптивной высотой для каждого слайда при просмотре на мобильных устройствах, и ваш сайт будет прокручиваться нормально во всех разрешениях.