How to use swiper history navigation in Framework7Vue

Questions
1

I try to use swiper’s history navigation in f7, but it doesn’t work :frowning_face:

there is my swiper’s parameters:

swiperParams: SwiperOptions = {
        spaceBetween: 1,
        slidesPerView: 1,
        centeredSlides: true,
        initialSlide: 0,
        preventClicks: false,
        observer: true,
        effect: 'slide',
        direction: 'vertical',
        noSwipingClass: 'swiper-no-swiping',
        threshold: 25,
        hashNavigation: {
            watchState: true,
            replaceState: true,
        }
};

swiper element in vue template:

<f7-swiper ref="storySwiper" class="story-swiper wh-100" :params="swiperParams">
            <f7-swiper-slide
                class="slide"
                v-for="(post, idx) in posts"
                :key="idx"
                :data-history="post.no"
            >something</f7-swiper-slide>
</f7-swiper>

I’m not sure that config is correct or not.

2

It is correct, but Swiper’s history and hashNavigation are not included in F7’s version of Swiper, will add them in next release

1 Like
3

@nolimits4web I saw history & hashNavigation has been included in 5.7.5, thank you for adding this feature.
but… I have new problem:
there are 3 routes:

  1. /home
  2. /slides/:id, have Swiper’s slides, use Swiper’s history, id has n1 & n2 & n3
  3. /info

I go from /home to /slides/n1, in slides/n1 can swipe to n2 or n3 (with swiper’s history)
when current route is /slides/n2, use $f7router.navigate to /info route, and use $f7router.back() to previous route,
at this time the page is /home page, but route is /slides/n3.

Swiper’s history seems incompatible with f7’s router…