Почему не работает свайпер слайдер со свойством autoHeight?

Question

[Kamil]

Имеется слайдер, который встроен внутри табов. То есть по нажатию на табы скрываются не нужные слайды и открываются нужные. Чтобы это корректно работало, при нажатии на табы, использовал свойство swiper2.update(). И все было отлично. Однако у меня слайды все разной высоты. Для этого свайперу прописал свойство autoHeight: true. И после этого при нажатии на табы слайдер ломается, ничего не показывает.

swiper.update() и autoHeight не работают вместе почему-то. Как можно решить эту проблему?

Вот на кодпен перенес ситуацию:
Если у слайдера убрать свойство AutoHeight, то табы работают. Если же добавить autoHeight табы перестают работать, слайды исчезают просто

Answer 1

[sharpsss]

мб сменить подход, ну а так ваще попробуй контэйнер под картиночки сделать с min-width/height а картиночки background-size:cover/object-fit

const tab_button= document.querySelectorAll('.section-services__link');
const useless = document.querySelectorAll('.hidden');
function hidden_useless(){
  for(var n = 0; n < useless.length; n++) {
    useless[n].style.display = 'none';
  }
}
tab_button.forEach(div=> {
  div.addEventListener('div', hidden_useless)
})

Comments

[Kamil]

а где тут слайдер?

[sharpsss]

Kamil, перечитал вопрос хзваыхз капец я сумасшедший вот что происходит когда долго не спал ,ща подредачу ответ

[Kamil]

sharp97, смысла нет обертке какой то добавлять min-height. Так как внутри слайдер все равно автоматически поставит высоту 0 и все то ,что внутри слайдера не будет видно. Слайдер как бы считает, что, когда мы нажимаем на таб, то мы удаляем слайд, поэтому он ставит высоту 0. Хотя я применяю свойство update для свайпера и по идеи дом элементы должны строиться заново. Но высота при этом считается по первому табу, который скрыт и соотвтственно равен 0. Неужели надо для каждого таба отдельно делать слайдеры. 10 табов и 10 слайдеров. Это будет работать тогда, но зачем использовать повторяющиеся слайды...