javascript - Swiper and bootstap collapse refresh -

who faced such problem in swiper. inside slide, there bootsrap collapse. if options autoheight: true, height not recalculated. tried observer option, not work smoothly. thought of way through settimeout update swiper every second, seems costly operation. please tell me more optimal way how deal such problem. default not work

var swiper = $('.swiper-container').swiper({    autoheight: true,    nextbutton: '.swiper-button-next',    prevbutton: '.swiper-button-prev'  });

* {    box-sizing: border-box;  }  body {    margin: 50px;  }  .parent {    background-color: #ccc;    padding: 20px;  }  .swiper-slide {    padding: 0 50px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.4.2/js/swiper.jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.4.2/css/swiper.min.css" rel="stylesheet" />  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />  <!-- slider main container -->  <div class="parent">    <div class="swiper-container">      <!-- additional required wrapper -->      <div class="swiper-wrapper">        <!-- slides -->        <div class="swiper-slide">          <div id="accordion" role="tablist" aria-multiselectable="true">            <div class="card">              <div class="card-header" role="tab" id="headingone">                <h5 class="mb-0">                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="false" aria-controls="collapseone">                              collapsible group item #1                            </a>                </h5>              </div>                <div id="collapseone" class="collapse" role="tabpanel" aria-labelledby="headingone">                <div class="card-block">                  anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. food truck quinoa nesciunt laborum eiusmod. brunch 3 wolf moon tempor, sunt aliqua put bird                  on squid single-origin coffee nulla assumenda shoreditch et. nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ad vegan excepteur butcher vice lomo. leggings occaecat craft beer farm-to-table,                  raw denim aesthetic synth nesciunt haven't heard of them accusamus labore sustainable vhs.                </div>              </div>            </div>            <div class="card">              <div class="card-header" role="tab" id="headingtwo">                <h5 class="mb-0">                  <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">                              collapsible group item #2                            </a>                </h5>              </div>              <div id="collapsetwo" class="collapse" role="tabpanel" aria-labelledby="headingtwo">                <div class="card-block">                  anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. food truck quinoa nesciunt laborum eiusmod. brunch 3 wolf moon tempor, sunt aliqua put bird                  on squid single-origin coffee nulla assumenda shoreditch et. nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ad vegan excepteur butcher vice lomo. leggings occaecat craft beer farm-to-table,                  raw denim aesthetic synth nesciunt haven't heard of them accusamus labore sustainable vhs.                </div>              </div>            </div>            <div class="card">              <div class="card-header" role="tab" id="headingthree">                <h5 class="mb-0">                  <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree">                              collapsible group item #3                            </a>                </h5>              </div>              <div id="collapsethree" class="collapse" role="tabpanel" aria-labelledby="headingthree">                <div class="card-block">                  anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. food truck quinoa nesciunt laborum eiusmod. brunch 3 wolf moon tempor, sunt aliqua put bird                  on squid single-origin coffee nulla assumenda shoreditch et. nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ad vegan excepteur butcher vice lomo. leggings occaecat craft beer farm-to-table,                  raw denim aesthetic synth nesciunt haven't heard of them accusamus labore sustainable vhs.                </div>              </div>            </div>          </div>        </div>        <div class="swiper-slide">slide 2</div>        <div class="swiper-slide">slide 3</div>      </div>      <!-- if need navigation buttons -->      <div class="swiper-button-prev"></div>      <div class="swiper-button-next"></div>    </div>  </div>

my fix

var swiper = $('.swiper-container').swiper({      autoheight: true,      nextbutton: '.swiper-button-next',      prevbutton: '.swiper-button-prev'  });  function updateswiper(swiper) {      if (swiper) {          swiper.update(true);      }  }  var timerid;  $('.collapse').on('show.bs.collapse hide.bs.collapse', function(e) {      timerid = settimeout(function update() {          updateswiper(swiper);          timerid = settimeout(update, 0);      }, 0);  });  $('.collapse').on('shown.bs.collapse hidden.bs.collapse', function(e) {      cleartimeout(timerid);  });

* {    box-sizing: border-box;  }  body {    margin: 50px;  }  .parent {    background-color: #ccc;    padding: 20px;  }  .swiper-slide {    padding: 0 50px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.4.2/js/swiper.jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.4.2/css/swiper.min.css" rel="stylesheet" />  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />  <!-- slider main container -->  <div class="parent">    <div class="swiper-container">      <!-- additional required wrapper -->      <div class="swiper-wrapper">        <!-- slides -->        <div class="swiper-slide">          <div id="accordion" role="tablist" aria-multiselectable="true">            <div class="card">              <div class="card-header" role="tab" id="headingone">                <h5 class="mb-0">                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="false" aria-controls="collapseone">                              collapsible group item #1                            </a>                </h5>              </div>                <div id="collapseone" class="collapse" role="tabpanel" aria-labelledby="headingone">                <div class="card-block">                  anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. food truck quinoa nesciunt laborum eiusmod. brunch 3 wolf moon tempor, sunt aliqua put bird                  on squid single-origin coffee nulla assumenda shoreditch et. nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ad vegan excepteur butcher vice lomo. leggings occaecat craft beer farm-to-table,                  raw denim aesthetic synth nesciunt haven't heard of them accusamus labore sustainable vhs.                </div>              </div>            </div>            <div class="card">              <div class="card-header" role="tab" id="headingtwo">                <h5 class="mb-0">                  <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">                              collapsible group item #2                            </a>                </h5>              </div>              <div id="collapsetwo" class="collapse" role="tabpanel" aria-labelledby="headingtwo">                <div class="card-block">                  anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. food truck quinoa nesciunt laborum eiusmod. brunch 3 wolf moon tempor, sunt aliqua put bird                  on squid single-origin coffee nulla assumenda shoreditch et. nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ad vegan excepteur butcher vice lomo. leggings occaecat craft beer farm-to-table,                  raw denim aesthetic synth nesciunt haven't heard of them accusamus labore sustainable vhs.                </div>              </div>            </div>            <div class="card">              <div class="card-header" role="tab" id="headingthree">                <h5 class="mb-0">                  <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree">                              collapsible group item #3                            </a>                </h5>              </div>              <div id="collapsethree" class="collapse" role="tabpanel" aria-labelledby="headingthree">                <div class="card-block">                  anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. food truck quinoa nesciunt laborum eiusmod. brunch 3 wolf moon tempor, sunt aliqua put bird                  on squid single-origin coffee nulla assumenda shoreditch et. nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ad vegan excepteur butcher vice lomo. leggings occaecat craft beer farm-to-table,                  raw denim aesthetic synth nesciunt haven't heard of them accusamus labore sustainable vhs.                </div>              </div>            </div>          </div>        </div>        <div class="swiper-slide">slide 2</div>        <div class="swiper-slide">slide 3</div>      </div>      <!-- if need navigation buttons -->      <div class="swiper-button-prev"></div>      <div class="swiper-button-next"></div>    </div>  </div>

wiki