title: Swiper Center Slide on click event
body: <p>I am using Swiper for a horizontal scrolling menu.</p>
  
  <p>How can I center the clicked slide in my menu, so when someone clicks on a link, it scrolls the clicked link to the center of the slider.</p>
  
  <p>This is the javascript for my swiper:</p>
  
  <pre><code>var navigationswiper = new Swiper('.swiper-navigation', {
      // Default parameters
      slidesPerView: 'auto',
      spaceBetween: 0,
      grabCursor: true,
      centeredSlides: true,
  });
  </code></pre>
  
  <p>This is the code for the menu inside the swiper:</p>
  
  <pre><code>&lt;div class="siwper-container swiper-navigation"&gt;
  &lt;div id="test" class="swiper-wrapper"&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;
              &lt;a class="Abschiebung horizontal-menu-link hashscroll" href="#1-kategorie" alt="View all posts in Abschiebung"&gt;Abschiebung&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;
              &lt;a class="Arbeit &amp;amp; Ausbildung horizontal-menu-link hashscroll" href="#2-kategorie" alt="View all posts in Arbeit &amp;amp; Ausbildung"&gt;Arbeit &amp;amp; Ausbildung&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;
              &lt;a class="Arbeitshilfen &amp;amp; Publikationen horizontal-menu-link hashscroll" href="#3-kategorie" 
                  alt="View all posts in Arbeitshilfen &amp;amp; Publikationen"&gt;Arbeitshilfen &amp;amp; Publikationen&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;
              &lt;a class="Asylpolitik horizontal-menu-link hashscroll" href="#4-kategorie" alt="View all posts in Asylpolitik"&gt;Asylpolitik&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;
              &lt;a class="Asylverfahren horizontal-menu-link hashscroll" href="#5-kategorie" alt="View all posts in Asylverfahren"&gt;Asylverfahren&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;
              &lt;a class="Europa horizontal-menu-link hashscroll" href="#6-kategorie" alt="View all posts in Europa"&gt;Europa&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;
              &lt;a class="Gesundheit &amp;amp; Soziales horizontal-menu-link hashscroll" href="#7-kategorie" 
                  alt="View all posts in Gesundheit &amp;amp; Soziales"&gt;Gesundheit &amp;amp; Soziales&lt;/a&gt;
          &lt;/div&gt;&lt;
      /div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;
              &lt;a class="Pressemitteilungen horizontal-menu-link hashscroll" href="#8-kategorie" alt="View all posts in Pressemitteilungen"&gt;Pressemitteilungen&lt;/a&gt;&lt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;&lt;a class="Unterbringung &amp;amp; Wohnen horizontal-menu-link hashscroll" href="#9-kategorie" alt="View all posts in Unterbringung &amp;amp; Wohnen"&gt;Unterbringung &amp;amp; Wohnen&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;
              &lt;a class="Veranstaltung horizontal-menu-link hashscroll" href="#10-kategorie" alt="View all posts in Veranstaltung"&gt;Veranstaltung&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-slide"&gt;
          &lt;div class="slide-link"&gt;&lt;a class="Webinare horizontal-menu-link hashscroll" href="#11-kategorie" alt="View all posts in Webinare"&gt;Webinare&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I´ve already tried to add the class "swiper-slide-active" to the clicked Slide and remove the class from all other slides. But nothing happens. I guess it calculates the position in the script not depending on the class.</p>
  
  <p>This is the code for adding the class:</p>
  
  <pre><code>navigationswiper.on('click', function () {
      console.log(this.clickedSlide);
      jQuery('swiper-navigation-color .swiper-slide').removeClass('swiper-slide-active');
      jQuery(this.clickedSlide).addClass('swiper-slide-active');
      navigationswiper.update();
  });
  </code></pre>
  
  <p>and here´s a screenshot of the menu and the Site:
  <a href="https://i.stack.imgur.com/iqZRO.png" rel="nofollow noreferrer">Image of the site with the slider</a></p>
  
  <p>The SwiperSlider is inside the red div at the top.</p>
  
  <p>Hope somebody can help me out.</p>
  
  <p>Thanks</p>