滑动中心滑动点击事件答案

【问题标题】：Swiper Center Slide on click event滑动中心滑动点击事件
【发布时间】：2020-09-20 17:51:07
【问题描述】：

我正在使用 Swiper 作为水平滚动菜单。

如何在我的菜单中将点击的幻灯片居中，这样当有人点击链接时，它会将点击的链接滚动到滑块的中心。

这是我的 swiper 的 javascript：

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

这是滑动器内菜单的代码：

<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>

我已经尝试将“swiper-slide-active”类添加到单击的幻灯片中，并从所有其他幻灯片中删除该类。但什么也没有发生。我猜它计算脚本中的位置不取决于类。

这是添加类的代码：

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

这是菜单和网站的屏幕截图： Image of the site with the slider

SwiperSlider 位于顶部的红色 div 内。

希望有人能帮帮我。

谢谢

【问题讨论】：

你有什么问题？
点击我的刷卡器内的链接时，网站滚动到链接的 ID，但我的刷卡器没有移动。我希望点击的链接在第一个位置滚动。

标签： javascript html jquery css swiper

【解决方案1】：

你错过了这个：

slideToClickedSlide={true}

希望这对未来的人（比如我）有所帮助

【讨论】：