[SOLVED] Swiper not working with Handlers

1

I’m getting information from my serverside php, but Swiper not working when getting this, only direct with images inside index.html but inside template7 not working.

<script id="templatef" type="text/template7">
   <div class="swiper-container swiper-init demo-swiper">
   <div class="swiper-pagination"></div><div class="swiper-wrapper">
     {{#each this.list}}
      <div class="swiper-slide"><img src="{{imagem}}" width="100%" class=""></div>
     {{/each}}
      </div>
   </div>
</script>

This is my HTML.

1 Like
2

If you add this code after page init, then you need to init it manually using app.swiper.create http://framework7.io/docs/swiper.html#swiper-app-methods

1 Like
3

I using app.swiper.create in app.js

Need to start it on index.html?

4

You need to call it after you compiled template and added to DOM

5

Got it, thanks bro!!!

6

please share how did you manage to solve it

1 Like
7

I have the same problem, can’t get swiper to work in template …

I’m calling json data of slides with page mounted but after the slides filled they won’t move and look according to preferences (slidesPerView: 3) Strange thing is that the swiper intialized after I return back from another page. I want it to initialize normally at first time.

...
  			    <div class="swiper-container dswiper" >
    						<div class="swiper-wrapper apps" data-srv="{{items.srv}}" data-catsid="{{items.catsid}}">
    	{{#each slides}}
    			
    							<div class=" swiper-slide">
    								<a data-app="{{gn}}" id="{{gid}}" class="app">
    									<div class="card category">
    										<img class="card-image " src="{{c}}" alt="{{title}}">
    											<div class="ctitle ct">{{title}}</div>
    											<div class="card-bottom cb ">
    												<div class="card-comments"></div>
    												<div class="card-comments">
    													<i class="icon color-blue ion ion-ios-{{t4}}"></i>
    													<span class="c">{{t6}}</span>
    												</div>
    											</div>
    										</div>
    									</a>
    								</div>
    	{{/each}}

    		
    								<div class=" swiper-slide vm">
    									<a data-href="/discover/{{items.cid2}}/" style="height: 100%">
    										<div class="card category">
    											<div class="ctitle">View more..</div>
    										</div>
    									</a>
    								</div>
    							</div>
    							
    						</div>
    					</div>
...

    </template>
    <script>
     return {
    data: function () {	
    if (this.$route.path === "/ringtones/")
    	{return {items:{"srv": "ringtones","t6": "3","catsid": "Ringtones","cid": "Ringtone","cid2": "ringtone","t1": "5","t3": ""+vcolor+""}}
    } else
    	{return {items:{"srv":"wallpapers","t6": "3","catsid": "Wallpapers","cid": "Wallpaper","cid2": "wallpaper","t1": "6","t3": ""+vcolor+""}}
    }},
    	on: {
    pageMounted() {var self = this;


    app.preloader.show() 

     	app.request.json(pkj +'discover/?cat='+ this.$route.path , function (data) {
     
    		self.$setState({
     		slides: data.app.slides
    		});
    			 

    	 });
    			 
    		app.preloader.hide()
    		}

    ).catch((error) => {console.log('Cache')})

     }
    }}
    </script>
8

It worked as Vladimir suggested.
added this code below to app.js , removed swiper-init from template html

function sliders() {
var dSwiper = app.swiper.create('.dswiper', {
    spaceBetween: 10,
	slidesPerView: 3,
	  observer: true
})
		}
sliders()

app.on('pageInit', function(page) {sliders();})