Javascript Swiper Center单击幻灯片事件
我正在使用Swiper进行水平滚动菜单 如何在菜单中居中单击幻灯片,以便当有人单击链接时,它会将单击的链接滚动到滑块的中心 这是我的swiper的javascript: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
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 & Ausbildung horizontal-menu-link hashscroll" href="#2-kategorie" alt="View all posts in Arbeit & Ausbildung">Arbeit & Ausbildung</a>
</div>
</div>
<div class="swiper-slide">
<div class="slide-link">
<a class="Arbeitshilfen & Publikationen horizontal-menu-link hashscroll" href="#3-kategorie"
alt="View all posts in Arbeitshilfen & Publikationen">Arbeitshilfen & 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 & Soziales horizontal-menu-link hashscroll" href="#7-kategorie"
alt="View all posts in Gesundheit & Soziales">Gesundheit & 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 & Wohnen horizontal-menu-link hashscroll" href="#9-kategorie" alt="View all posts in Unterbringung & Wohnen">Unterbringung & 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();
});