CODEWITHSUNDEEP
jqueryhtmlswiper.jshtml-framework-7
Estudio 3551
Estudio 3551

Reputation: 170

Framework7 app dealing with dynamic Swiper Slider on index.html

I got a Swiper Slider on index.html that works only when app initialized. If I enter on other page, like about.html, and go back to index.html, the Swiper Slider dissapears. I really lost with this.

This is the JS

var template = $$('#newsScript').html();
var compiledTemplate = Template7.compile(template);
myApp.showPreloader('Cargando slider...');  
$$.getJSON("http://centenariosa.com.ar/wp-json/wp/v2/posts?categories=8&orderby=title&order=asc&per_page=100",function(jsonslider){
myApp.hidePreloader();
var slider = jsonslider;
var objuslider = [];
for (var i = 0; i < slider.length; i++) {
    var img = slider[i]["better_featured_image"]["media_details"]["sizes"]["wpbs-featured"];
    var acf = slider[i]["acf"];
    var t = {};
    t.id = i+1;
    t.enlace = acf["motor"];
    t.imagendestacada = img["source_url"];
    objuslider.push(t);
}   
Template7.data['page:index'] = objuslider; 
$$('#newsSwiper').html(compiledTemplate(objuslider));
//init swiper here
myApp.onPageInit('index', function (page) {
    var page = e.detail.page;
    // "page" variable contains all required information about loaded and initialized page 
    var swiper = myApp.swiper('.swiper-container #newsSwiper', {
        pagination:'.swiper-pagination',
        direction: 'vertical',
        autoplay: 4000
    });
}).trigger();
});

Index.html

<div class="swiper-container slide-home">
<div id="newsSwiper"></div>
    <script type="text/template7" id="newsScript">
    <div class="swiper-wrapper"> 
        {{#each this}}
        <div class="swiper-slide"><img src="{{imagendestacada}}"></div>
        {{/each}}
    </div>
    </script>   
    <div class="swiper-pagination"></div>                           
</div>

enter image description here

Upvotes: 0

Views: 1588

Answers (1)

Estudio 3551
Estudio 3551

Reputation: 170

Ok i solved this way.

I don't know if there's a better way to do this. But it works for me.

JS

var template = $$('#newsScript').html();
var compiledTemplate = Template7.compile(template);
myApp.showPreloader('Cargando slider...');  
$$.getJSON("http://centenariosa.com.ar/wp-json/wp/v2/posts?categories=8&orderby=title&order=asc&per_page=100",function(jsonslider){
    myApp.hidePreloader();
    var slider = jsonslider;
    var objuslider = [];
    for (var i = 0; i < slider.length; i++) {
        var img = slider[i]["better_featured_image"]["media_details"]["sizes"]["wpbs-featured"];
        var acf = slider[i]["acf"];
        var o = [];
        var t = {};
        var z = {};
        t.id = i+1;
        t.enlace = acf["motor"];
        t.imagendestacada = img["source_url"];
        objuslider.push(t);
    }   
    Template7.data['page:index'] = objuslider;
    console.log(JSON.stringify(objuslider, null, 2));
    $$('#newsSwiper').html(compiledTemplate(objuslider));

    var swiper = myApp.swiper('.swiper-container #newsSwiper', {
        pagination:'.swiper-pagination',
        direction: 'vertical',
        autoplay: 4000,
        loop: true
    }); 
    myApp.onPageInit('index', function (page) {
        $$(page.container).find('.swiper-container #newsSwiper').html(compiledTemplate(objuslider));
        var swiper = myApp.swiper('.swiper-container #newsSwiper', {
            pagination:'.swiper-pagination',
            direction: 'vertical',
            autoplay: 4000,
            loop: true
        });
    }).trigger();
});

INDEX.HTML

<div class="swiper-container slide-home container">
    <div id="newsSwiper"></div>
    <script type="text/template7" id="newsScript">
    <div class="swiper-wrapper"> 
        {{#each this}}
        <div class="swiper-slide"><img src="{{imagendestacada}}"></div>
        {{/each}}
        </div>
        <div class="swiper-pagination"></div>
    </script>                               
</div>

Upvotes: 1

Related Questions