Приложение Framework7, работающее с динамическим слайдером Swiper на index.html

У меня есть Swiper Slider на index.html, который работает только при инициализации приложения. Если я войду на другую страницу, например about.html, и вернусь к index.html, слайдер Swiper исчезнет. Я действительно проиграл с этим.

это 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();
});

Индекс.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>

введите здесь описание изображения


html jquery swiper html-framework-7
person Estudio 3551    schedule 28.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, я решил таким образом.

Я не знаю, есть ли лучший способ сделать это. Но это работает для меня.

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>
person Estudio 3551    schedule 29.03.2017