javascript - Swiper Center Slide on click event

I am using Swiper for a horizontal scrolling menu.

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.

This is the javascript for my swiper:

var navigationswiper = new Swiper('.swiper-navigation', {
    // Default parameters
    slidesPerView: 'auto',
    spaceBetween: 0,
    grabCursor: true,
    centeredSlides: true,
});

This is the code for the menu inside the swiper:

<div class="siwper-container swiper-navigation">
<div id="test" class="swiper-wrapper">
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Abschiebung horizontal-menu-link hashscroll" href="#1-kategorie" alt="View all posts in Abschiebung">Abschiebung</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Arbeit &amp; Ausbildung horizontal-menu-link hashscroll" href="#2-kategorie" alt="View all posts in Arbeit &amp; Ausbildung">Arbeit &amp; Ausbildung</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Arbeitshilfen &amp; Publikationen horizontal-menu-link hashscroll" href="#3-kategorie" 
                alt="View all posts in Arbeitshilfen &amp; Publikationen">Arbeitshilfen &amp; Publikationen</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Asylpolitik horizontal-menu-link hashscroll" href="#4-kategorie" alt="View all posts in Asylpolitik">Asylpolitik</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Asylverfahren horizontal-menu-link hashscroll" href="#5-kategorie" alt="View all posts in Asylverfahren">Asylverfahren</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Europa horizontal-menu-link hashscroll" href="#6-kategorie" alt="View all posts in Europa">Europa</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Gesundheit &amp; Soziales horizontal-menu-link hashscroll" href="#7-kategorie" 
                alt="View all posts in Gesundheit &amp; Soziales">Gesundheit &amp; Soziales</a>
        </div><
    /div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Pressemitteilungen horizontal-menu-link hashscroll" href="#8-kategorie" alt="View all posts in Pressemitteilungen">Pressemitteilungen</a><
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link"><a class="Unterbringung &amp; Wohnen horizontal-menu-link hashscroll" href="#9-kategorie" alt="View all posts in Unterbringung &amp; Wohnen">Unterbringung &amp; Wohnen</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Veranstaltung horizontal-menu-link hashscroll" href="#10-kategorie" alt="View all posts in Veranstaltung">Veranstaltung</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link"><a class="Webinare horizontal-menu-link hashscroll" href="#11-kategorie" alt="View all posts in Webinare">Webinare</a>
    </div>
</div>

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.

This is the code for adding the class:

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();
});

and here´s a screenshot of the menu and the Site: Image of the site with the slider

The SwiperSlider is inside the red div at the top.

Hope somebody can help me out.

Thanks

I am using Swiper for a horizontal scrolling menu.

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.

This is the javascript for my swiper:

var navigationswiper = new Swiper('.swiper-navigation', {
    // Default parameters
    slidesPerView: 'auto',
    spaceBetween: 0,
    grabCursor: true,
    centeredSlides: true,
});

This is the code for the menu inside the swiper:

<div class="siwper-container swiper-navigation">
<div id="test" class="swiper-wrapper">
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Abschiebung horizontal-menu-link hashscroll" href="#1-kategorie" alt="View all posts in Abschiebung">Abschiebung</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Arbeit &amp; Ausbildung horizontal-menu-link hashscroll" href="#2-kategorie" alt="View all posts in Arbeit &amp; Ausbildung">Arbeit &amp; Ausbildung</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Arbeitshilfen &amp; Publikationen horizontal-menu-link hashscroll" href="#3-kategorie" 
                alt="View all posts in Arbeitshilfen &amp; Publikationen">Arbeitshilfen &amp; Publikationen</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Asylpolitik horizontal-menu-link hashscroll" href="#4-kategorie" alt="View all posts in Asylpolitik">Asylpolitik</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Asylverfahren horizontal-menu-link hashscroll" href="#5-kategorie" alt="View all posts in Asylverfahren">Asylverfahren</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Europa horizontal-menu-link hashscroll" href="#6-kategorie" alt="View all posts in Europa">Europa</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Gesundheit &amp; Soziales horizontal-menu-link hashscroll" href="#7-kategorie" 
                alt="View all posts in Gesundheit &amp; Soziales">Gesundheit &amp; Soziales</a>
        </div><
    /div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Pressemitteilungen horizontal-menu-link hashscroll" href="#8-kategorie" alt="View all posts in Pressemitteilungen">Pressemitteilungen</a><
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link"><a class="Unterbringung &amp; Wohnen horizontal-menu-link hashscroll" href="#9-kategorie" alt="View all posts in Unterbringung &amp; Wohnen">Unterbringung &amp; Wohnen</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link">
            <a class="Veranstaltung horizontal-menu-link hashscroll" href="#10-kategorie" alt="View all posts in Veranstaltung">Veranstaltung</a>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="slide-link"><a class="Webinare horizontal-menu-link hashscroll" href="#11-kategorie" alt="View all posts in Webinare">Webinare</a>
    </div>
</div>

This is the code for adding the class:

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();
});

and here´s a screenshot of the menu and the Site: Image of the site with the slider

The SwiperSlider is inside the red div at the top.

Hope somebody can help me out.

Thanks

Share Improve this question asked Jun 2, 2020 at 9:35 M.K 251 gold badge2 silver badges6 bronze badges

What's the issue you having? – Tim567 Commented Jun 2, 2020 at 9:38
When clicking on a link inside my swiper, the site scrolls to the ID of the link but my swiper is not moving. I want the clicked link to get scrolled on first position. – M.K Commented Jun 5, 2020 at 14:34

Add a comment |

3 Answers 3

Sorted by: Reset to default 16

you are missing this:

slideToClickedSlide={true}

Hope this helps somebody in the future (like me)

you have a typo in

<div class="siwper-container swiper-navigation">

it should be

<div class="swiper-container swiper-navigation">

Try this:

var mySwiper = new Swiper('.swiper-navigation', {
  slidesPerView: 4.5,
  spaceBetween: 20,
  updateOnWindowResize: true,
  loop: true,
  grabCursor: true,
  centeredSlides: true,
  centeredSlidesBounds: true,
  initialSlide: 0,
});

https://codepen.io/Terrafire123/pen/gOwbjMy

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Swiper Center Slide on click event - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)