Как на странице менять высоту слайда Swiper?

Question

[Евгений Леонов]

На странице есть swiper slider, в каждом слайде есть аккордеон с текстом (текст открыт по дефолту).
Когда сворачиваю аккордеон - контент снизу не поднимается, т.е. высота слайда не меняется сразу (я так понимаю).
Пробовал ставить высоту автоматическую, но срабатывает только при перелистывании на другой слайд и возврате на предыдущий.

Страницу можно посмотреть на тестовом домене ievgen1x.beget.tech

Вот этот слайдер:


Код js

var swiper = new Swiper(".swiper-date", {
  autoHeight: true,
  navigation: {
    nextEl: ".btn-date_next",
    prevEl: ".btn-date_prev",
  },
  breakpoints: {
      320: {
          spaceBetween: 20,
      },
      768: {
          spaceBetween: 20,
      }
  }
});

Answer 1

[Евгений Леонов]

Вопрос решил таким кодом:

new Swiper(".swiper-date", {
  autoHeight: true,
  navigation: {
    nextEl: ".btn-date_next",
    prevEl: ".btn-date_prev",
  },
  breakpoints: {
      320: {
          spaceBetween: 20,
      },
      768: {
          spaceBetween: 20,
      }
  }
});

const swipersDate = document.querySelectorAll('.swiper-date');

swipersDate.forEach(swiperDate => {
  const swiperItem = swiperDate.swiper;

  setInterval(() => {
    swiperItem.update();
  }, 100)
})

Answer 2

[Сергей delphinpro]

Смотрите методы https://swiperjs.com/swiper-api

swiper.updateAutoHeight(speed)
swiper.updateSize()

Comments

[Евгений Леонов]

Сергей delphinpro, подскажи, пожалуйста, а как мне эти методы использовать в слайдере?
У меня аккордеон на css

[Сергей delphinpro]

Евгений Леонов, Когда у тебя аккордион открылся/закрылся, ты вызываешь эти методы. Слайдер пересчитает свои размеры.

[Евгений Леонов]

Сергей delphinpro, я не силен в js, но вот нашел примерно подходящий вариант, но он не работает. Что не так? Можешь подсказать?

<div class="accordion-types">
                                                <input type="checkbox" class="accordion-types__input" id="faq-2">
                                                <p class="accordion-types__title">
                                                    <label for="faq-2" class="go">
                                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M16.9473 13.605C16.8288 13.5385 16.7123 13.4686 16.5977 13.3955C16.189 13.1329 15.7978 12.8437 15.4268 12.53C14.4863 11.7404 13.2914 10.5022 12.2508 8.70075C11.2111 6.89854 10.7368 5.24511 10.5233 4.03483C10.437 3.55632 10.3822 3.07267 10.3593 2.58698C10.3532 2.45162 10.3508 2.31612 10.3521 2.18062C10.3529 2.13263 10.3585 2.03504 10.3593 2.00864C8.83422 1.93753 7.32085 2.30656 5.99961 3.07173C4.67745 3.83259 3.6017 4.95737 2.90039 6.3122L3.05155 6.39459C3.13553 6.44258 3.2539 6.51138 3.40106 6.60417C3.69459 6.79135 4.10169 7.07452 4.57197 7.46968C5.51253 8.26 6.70743 9.49747 7.74717 11.2997C8.78771 13.1011 9.26199 14.7553 9.47634 15.9648C9.58271 16.5703 9.6243 17.0647 9.6395 17.4127C9.64749 17.5862 9.6475 17.7238 9.6467 17.8198V17.9918C11.1689 18.061 12.679 17.6917 13.9976 16.9279C15.3189 16.168 16.3944 15.0447 17.096 13.6914L16.9473 13.605Z" fill="#333333"/>
                                                            <path d="M8.44728 17.8471C8.4487 17.7197 8.44683 17.5922 8.44168 17.4648C8.42112 17.032 8.37223 16.6009 8.29531 16.1745C8.10256 15.0794 7.66907 13.562 6.71011 11.9006C5.75035 10.2383 4.65303 9.10485 3.80124 8.38892C3.4708 8.10939 3.12241 7.8518 2.75831 7.6178C2.63114 7.53781 2.49437 7.45862 2.42879 7.42182C2.06009 8.50076 1.92685 9.6462 2.03805 10.781C2.14924 11.9158 2.5023 13.0135 3.07343 14.0003C3.64233 14.9884 4.41633 15.8431 5.34331 16.5068C6.27028 17.1705 7.3287 17.627 8.44728 17.8471ZM11.5529 2.15356C11.5513 2.2813 11.5529 2.40906 11.5577 2.53673C11.5713 2.83669 11.6081 3.27825 11.7049 3.82619C11.8976 4.92208 12.3311 6.43872 13.2901 8.10095C14.2498 9.76238 15.3471 10.8959 16.1989 11.6118C16.6244 11.9694 16.9883 12.2213 17.2419 12.3829C17.369 12.4637 17.5058 12.5429 17.5714 12.5789C17.94 11.5001 18.0731 10.3548 17.9619 9.22014C17.8507 8.08551 17.4978 6.98788 16.9267 6.00117C16.3578 5.01309 15.5838 4.15842 14.6569 3.49472C13.7299 2.83102 12.6715 2.3737 11.5529 2.15356Z" fill="#333333"/>
                                                        </svg>
                                                        Теннис
                                                    </label>
                                                </p>
                                                <div class="show">
                                                    <div class="show__heading">
                                                        <img src="assets/img/maroc.png" alt="флаг">
                                                        <p class="heading__text">
                                                            Марокко > WTA 500. Adelaide Interna...
                                                        </p>
                                                    </div>
                                                    <div class="match-block">
                                                        <div class="match-block__teams">
                                                            <div class="team">
                                                                <img src="assets/img/aus.png" alt="логотип">
                                                                <p>
                                                                    Грабер Д.
                                                                </p>
                                                            </div>
                                                            <div class="team">
                                                                <img src="assets/img/arg.png" alt="логотип">
                                                                <p>
                                                                    Риера Ю.
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <a href="#" class="match-block__link active">
                                                            Прогнозы (7)
                                                        </a>
                                                    </div>
                                                    <div class="match-block">
                                                        <div class="match-block__teams">
                                                            <div class="team">
                                                                <img src="assets/img/usa.png" alt="логотип">
                                                                <p>
                                                                    Бронцетти Л.
                                                                </p>
                                                            </div>
                                                            <div class="team">
                                                                <img src="assets/img/italy.png" alt="логотип">
                                                                <p>
                                                                    Стивенс С
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <a href="#" class="match-block__link active">
                                                            Прогнозы (25)
                                                        </a>
                                                    </div>
                                                    <div class="match-block">
                                                        <div class="match-block__teams">
                                                            <div class="team">
                                                                <img src="assets/img/aus.png" alt="логотип">
                                                                <p>
                                                                    Грабер Д.
                                                                </p>
                                                            </div>
                                                            <div class="team">
                                                                <img src="assets/img/arg.png" alt="логотип">
                                                                <p>
                                                                    Риера Ю.
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <a href="#" class="match-block__link active">
                                                            Прогнозы (7)
                                                        </a>
                                                    </div>
                                                    <div class="match-block">
                                                        <div class="match-block__teams">
                                                            <div class="team">
                                                                <img src="assets/img/usa.png" alt="логотип">
                                                                <p>
                                                                    Бронцетти Л.
                                                                </p>
                                                            </div>
                                                            <div class="team">
                                                                <img src="assets/img/italy.png" alt="логотип">
                                                                <p>
                                                                    Стивенс С
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <a href="#" class="match-block__link active">
                                                            Прогнозы (25)
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>

var swiperDate = new Swiper(".swiper-date", {
  autoHeight: true,
  navigation: {
    nextEl: ".btn-date_next",
    prevEl: ".btn-date_prev",
  },
  breakpoints: {
      320: {
          spaceBetween: 20,
      },
      768: {
          spaceBetween: 20,
      }
  }
});

let acc = document.querySelectorAll('.accordion-types__input');

$(acc).click(() => {
  setTimeout(() => {
    console.log('клик');
    swiperDate.updateAutoHeight(4000);
    swiperDate.update()

  }, 400);
})