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?