F7-tempates in f7-swiper renderSlides callback?

Is there a way to use f7-templates in f7-swiper’s renderSlides callback, when using Virtual Slides?

If you mean Template7, then for example:

const slideTemplate = Template7.compile(`
  <div class="swiper-slide" data-index="{{index}}">...</div>
`);

...
renderSlide(slide, index) {
  return slideTemplate({ index });
}

Thx for the tipp - but I am currently getting aquainted with F7-Vue and merely meant F7’s Vue-Components.

Another hint?

Not really, but you can use Template7 in f7-vue as well, as this.$t7

Right now I’m just returning a string-literal (same thing you showed here, but without the Template7.compile). Works too - but I will have a look at Template7…

thanks for the pointer

Is there way to use router component (https://framework7.io/docs/router-component.html) as virtual slide? Thanks for reply!

What i want to do, is get component 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?