Javascript Swiper Center单击幻灯片事件

Javascript Swiper Center单击幻灯片事件,javascript,html,jquery,css,swiper,Javascript,Html,Jquery,Css,Swiper,我正在使用Swiper进行水平滚动菜单 如何在菜单中居中单击幻灯片,以便当有人单击链接时,它会将单击的链接滚动到滑块的中心 这是我的swiper的javascript: var navigationswiper = new Swiper('.swiper-navigation', { // Default parameters slidesPerView: 'auto', spaceBetween: 0, grabCursor: true, centere

我正在使用Swiper进行水平滚动菜单

如何在菜单中居中单击幻灯片,以便当有人单击链接时,它会将单击的链接滚动到滑块的中心

这是我的swiper的javascript:

var navigationswiper = new Swiper('.swiper-navigation', {
    // Default parameters
    slidesPerView: 'auto',
    spaceBetween: 0,
    grabCursor: true,
    centeredSlides: true,
});
这是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>
下面是菜单和网站的截图:

瑞士滑翔机在顶部的红色div内

希望有人能帮我

谢谢

您错过了以下内容:

slideToClickedSlide={true}


希望这对将来的人(像我一样)有所帮助。

你有什么问题?单击我的刷卡器内的链接时,网站会滚动到链接的ID,但我的刷卡器不会移动。我想点击链接得到第一个位置滚动。
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();
});