$(document).on('page:beforein', '.page[data-name="timeline"]', async function (e) {

  console.log('app timeline ready')

  let dt2=get_localstorage('latest');

  let dt=dt2.data;

  //var content = `<div class="swiper-pagination"></div>`;

  var content = ``;

  //dt.forEach(v => {

  for(let a=0;a<30;a++){

    content +=`

    <div class="swiper-slide">

    <div class="timeline-slide">

      <a href="p/latest_byid/${dt[a].id}" data-href="p/latest_byid/${dt[a].id}" class="card card-1x1"  style="border-radius:0;">

        <div class="card-image">

          <img src="${dt[a].img}" alt="${dt[a].title}">

          <div class="card-image-footer">

            <h2 class="timel">${dt[a].title}</h2>

            <div class="card-author">`;

    if(dt[a].icon_url) {        

    content +=`<img src="${dt[a].icon_url}" alt="">`;

    }

    content +=`<span>`;

    if(dt[a].section) {        

    content +=`${dt[a].section}, `;

    }

    content +=`${dt[a].site} | ${InDayHour(dt[a].publish_at)}</span>`;

    content +=`</div>

          </div>

        

        </div>

        <div class="card-footer">

        <h3 class="timel">${dt[a].summary}</h3>

        </div>

      </a>

      </div>

    </div>

      `;

  };

  content +=``;



  $("#timeline_swiper_wraper").html(content); 



  var swiper = new Swiper(".swiper-timeline", {

    // Optional parameters

    direction: 'horizontal',

    loop: true, // Loop the slides

    // Autoplay configuration

    

    autoplay: {

      delay: 5000, // Time in milliseconds between slides (e.g., 3 seconds)

      disableOnInteraction: false, // Continue autoplay even after user interaction

    }, 

    /* */

    // If you need pagination

    pagination: {

      el: '.swiper-pagination',

      clickable: true,

    },

  });    

});