CODEWITHSUNDEEP
javascripthtmljquerycssswiper.js
M.K
M.K

Reputation: 25

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

Upvotes: 2

Views: 24041

Answers (3)

Muhammad Tahseen ur Rehman
Muhammad Tahseen ur Rehman

Reputation: 253

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

Upvotes: 0

an_bozh
an_bozh

Reputation: 63

you have a typo in

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

it should be

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

Upvotes: 1

Alonso Tijero Larrabure
Alonso Tijero Larrabure

Reputation: 161

you are missing this:

slideToClickedSlide={true}

Hope this helps somebody in the future (like me)

Upvotes: 16

Related Questions