Change Swiper active class manually-CodePudding

I made my project with Vuejs and used Swiper to slide menu related to page sections tags.
I want the Swiper sliders to change automatically when the user scrolls on my page.

I tried the following codes:

Swiper code

<swiper
  :slidesPerView="2.3"
  :spaceBetween="30"
  :centeredSlides="true"
  @swiper="onSwiper">
  <swiper-slide v-for="(item,index) in categoriesList" :key="index">
    <CategoryItem :title="item.title" :icon="item.icon"/>
  </swiper-slide>
</swiper>

Category item example:

  categoriesList: [
    {
      foodsCount: 2,
      title: 'Pizza',
      icon: 'pizza.svg',
      tag: 'abcd-efgh-ijkl-mno1',
    },
  ];

Sections

<section :id="'category-'   item.tag" v-for="(item,index) in categoriesList" :key="index">
  <div >
    <b >{{ item.title }}</b>
  </div>
  <food-item  v-for="i in item.foodsCount" :key="i"/>
</section>

created hook (check scroll code)

  created() {

    window.onscroll = () => {
      let current = "";
      let prevIndex = this.currentIndex;

      let sections = document.querySelectorAll('section')

      sections.forEach((section) => {
        const sectionTop = section.offsetTop;
        if (pageYOffset >= sectionTop) {
          current = section.getAttribute("id");
          this.currentIndex = this.categoriesList.findIndex(item => item.tag === current.replace('category-', ''))
        }
      });

      if (this.currentIndex !== prevIndex) {

        let i = 0
        document.querySelectorAll('.swiper-slide').forEach(item => {

          if (this.currentIndex === i) {
            item.classList = 'swiper-slide swiper-slide-active'
          } else if (this.currentIndex === (i - 1)) {
            item.classList = 'swiper-slide swiper-slide-next'
          } else if (this.currentIndex === (i   1)) {
            item.classList = 'swiper-slide swiper-slide-previous'
          } else {
            item.classList = 'swiper-slide';
          }

          i  ;
        })

      }

    };

Note: I can't use SlideTo function because it breaks the dynamic while scrolling.
I think, it related to transform style on swiper-wrapper div but I can't handle it.

 <div  style="transition-duration: 0ms; transform: translate3d(*, *, *);">

Any solution?

CodePudding user response：

I did this way and its ok.

if (this.currentIndex !== prevIndex) {


          let i = 0
          document.querySelectorAll('.swiper-slide').forEach(item => {


            if (this.currentIndex === i) {
              item.classList = 'swiper-slide swiper-slide-active'

              document.querySelector('.swiper-wrapper').style.transform = "translate3d("   this.swiperCategory.snapGrid[i]   "px, 0, 0)";
              document.querySelector('.swiper-wrapper').style.transitionDuration = "300ms";

            } else if (this.currentIndex === (i - 1)) {
              item.classList = 'swiper-slide swiper-slide-next'
            } else if (this.currentIndex === (i   1)) {
              item.classList = 'swiper-slide swiper-slide-previous'
            } else {
              item.classList = 'swiper-slide';
            }


            i  ;
          })


        }