I try to init it with app.swiper.create(“the id”); because its not on the index html its in another page load by async in routes i dont know how to make it work, im new with the framework
You should call this swiper.create in pageInit event for the page with this swiper
{
path: '/moviles/:movilId',
async(routeTo, routeFrom, resolve, reject) {
// Show Preloader
app.preloader.show();
var movilId = String(routeTo.params.movilId);
function proceed () {
resolve(
{ templateUrl: './pages/moviles_page.html' },
{ context: { lists: json_moviles, } }
);
}
//cargamos solo el id del seleccionado en el listado
$.getJSON("https://proyectomoviles-5df5b.firebaseio.com/.json",function(moviles_json){
// obtenemos la plantilla
json_moviles = moviles_json.moviles;
proceed();
app.preloader.hide();
console.log(moviles_json.moviles[movilId]);
getTemplateAjax('js/templates/movil_select.html', moviles_json.moviles[movilId], '#movilTemplate');
});
},
**on:{**
** pageInit:function(){**
** var swiperslider = app.swiper.create({**
** el: '#swiperContMoviles',**
** init: true,**
** on: {**
** init: function () {**
** console.log('swiper initialized');**
** },**
** click: function () {**
** console.log('swiper click');**
** }**
** },**
** });**
** }**
}
},
Code looks correct if you have #swiperContMoviles
in your ./pages/moviles_page.html
template, you can also try to change it to the following in case you have few such pages:
pageInit:function(e, page){
var swiperslider = app.swiper.create({
el: page.$el.find('#swiperContMoviles'),
init: true,
...
])
}
problem solved, it was my html code, it was in the html template that i pass to ./pages/moviles_page.html and not in the page.
thanks for your help