[SOLVED] Render swiper slide from router (component)

Questions
1

Hi!
What i want to do, is get component (http://framework7.io/docs/router-component.html) object in swipers ‘renderSlide’ and append it to slide.
(Because of i want have stunning components features like methods, callback, styling etc. in every single page).

My try was:

  var swiper = page.app.swiper.create('#main-swiper', {
                    virtual: {
                        addSlidesBefore:2,
                        addSlidesAfter:1,
                        slides: ['/aaa/', '/bbb/', '/ccc/', 'Slide 44', 'Slide 55'],
                        renderSlide: function (slide, index) {
                        
                        // there i dont know how to get component, or page, or content by url
                        var componentAtRouteAAA = app.router.navigate('/aaa/');
                        
                        var newPage = '<div class="swiper-slide" data-index="'+index+'">'+componentAtRouteAAA+'</div>';

                        return newPage;
                    }
                },
            });

But it is the mistake, because navigate app.router.navigate returns only router and append content inside next page in DOM, not inside current slide.

Next try was create view from slide:

...
renderSlide: function (slide, index) {
                        
           
                        var x = '<div class="swiper-slide" data-index="'+index+'"></div>';

                        var view = app.views.create(x, {
                            url: '/aaa/'
                        });
                        
                        return x;
                    }
...

Doesnt work too.

Last one was, im looked into documentation of swiper, and maybe is answer “renderExternal”, but i dont know how to use router component there. https://idangero.us/swiper/api/#virtual .

Anybody can help please?

2

Hi, i made this solution, just for testing. Maybe there is a better way to do it.
Just use the code as an example.

jsfiddle

just swipe left/right each “slide” is a component of router, so now you can use as you want

edit:

(Because of i want have stunning components features like methods, callback, styling etc. in every single page).

maybe using vue is a good solution for what you need. f7+vuejs. i use it, and works great.

1 Like
3

Hi there!
First one, thank you very very much! I really appreciate it, if you need something, so write to me.

The final solution for me, with virtual slides and pre-rendered pages is:

var mySwiper = app.swiper.create('.swiper-container', {
virtual: {
    slides: ['about', 'test', 'test2', 'test3'], // url adreses
    renderSlide: function (slide, index) {
        return '<div class="swiper-slide" data-component="'+slide+'" data-rendered="false" id="'+slide+'"></div>';
    }
}
})

mySwiper.on('slideChangeTransitionEnd', function() {
//pageToRemove.remove(); // virtual slides removing automatic

for(var i = 0; i< this.slides.length; i++ ){
    var rendered = this.slides[i].dataset.rendered;
    var currentSlide = this.slides[i];
    console.log(rendered);
    // debugger;
    if(rendered === "false"){
        var current = app.views.create('#' + currentSlide.dataset.component);
        current.router.navigate('/' + currentSlide.dataset.component +'/');
        this.slides[i].dataset.rendered = true;
    }
}

Thank you very much!

1 Like
4

@pvtallulah is right. If you need to manage your content with components then Vue/React fits better for it because Framework7 Router components are not designed to be used like this

1 Like
5

Thanks for reply!
That’s true, but I wanted to use Framework 7 just as a wrapper and have the content in pure HTML5.