title: iDangero.us Swiper update function does not work after show/hide of slides
body: <p>I need some help with Swiper.
  According to its documentation here: <a href="http://idangero.us/swiper/api/" rel="nofollow noreferrer">http://idangero.us/swiper/api/</a>, I need to call mySwiper.update() after I hide/show slides manually. But it does not always work in my case.</p>
  
  <p>I've searched this issue, but only came across following solutions which should but for some reason do not work:</p>
  
  <ol>
  <li>mySwiper.update() as I mentioned before</li>
  <li>observer: true, observeParents: true when initializing swiper.</li>
  </ol>
  
  <p>Perhaps something wrong with my jQuery code, but I can't figure it out.</p>
  
  <p>This is how I initialize Swiper, as I need 2 rows and 3 columns to display data.</p>
  
  <pre><code>var swiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          slidesPerColumn: 2,
          spaceBetween: 30,
          observer: true,
          observeParents: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });
  </code></pre>
  
  <p>The Swiper wrapper goes like this in HTML:</p>
  
  <pre><code>&lt;div class="swiper-wrapper " id="plugins_list"&gt;
            &lt;div class="swiper-slide Category1 uk-animation-slide-top-medium"&gt;
              &lt;div class="uk-card uk-card-body"&gt;
                &lt;div class="uk-inline uk-slider-items uk-transition-toggle"&gt;
                  &lt;img src="./images/plu2.jpg" alt=""&gt;
                  &lt;div class="uk-overlay uk-overlay-primary uk-position-bottom"&gt;
                    &lt;p&gt;Default Lorem ipsum dolor sit amet.&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide Category1 uk-animation-slide-top-medium"&gt;
              &lt;div class="uk-card uk-card-body"&gt;
                &lt;div class="uk-inline uk-slider-items uk-transition-toggle"&gt;
                  &lt;img src="./images/plu2.jpg" alt=""&gt;
                  &lt;div class="uk-overlay uk-overlay-primary uk-position-bottom"&gt;
                    &lt;p&gt;Default Lorem ipsum dolor sit amet.&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide Category2 uk-animation-slide-top-medium"&gt;
              &lt;div class="uk-card uk-card-body"&gt;
                &lt;div class="uk-inline uk-slider-items uk-transition-toggle"&gt;
                  &lt;img src="./images/plu2.jpg" alt=""&gt;
                  &lt;div class="uk-overlay uk-overlay-primary uk-position-bottom"&gt;
                    &lt;p&gt;Default Lorem ipsum dolor sit amet.&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is how I want to update the wrapper:</p>
  
  <pre><code>// 'category1' button/tab selector
  $('#category1').on('click', function() {
          $('.swiper-slide').hide();
          $('.Category1').show();
          swiper.update(true);
        });
  // category2 button/tab selector 
        $('#category2').on('click', function() {
          $('.swiper-slide').hide();
          $('.Category1').show();
          swiper.update();
        });
  // 'All' button/tab selector - to show all slides, this i use only to show animation that all slides were loaded, this is working fine every time with swiper update
        $('#all').on('click', function() {
          $('.swiper-slide').hide();
          $('.swiper-slide').show();
          swiper.update();
        });
  </code></pre>
  
  <p>Any ideas? Or how should I show/hide the the slides differently? Please let me know.</p>
  
  <p>And in case the problem isn't clear, I am calling <code>swiper.update()</code> so the slide positions are updated, as when the slides are filtered (hidden/shown) the remaining ones are displayed out of position.</p>