Tiny File Manager

Back Back Up Advanced Editor

<?php
require_once '../parts.php';
require_once '../settings.php';

$settings = get_settings();
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Renderer</title>

// var renderer = new SplideRenderer(
      //   [
      //     '<img src="../../assets/images/pics/slide01.jpg">',
      //     '<img src="../../assets/images/pics/slide02.jpg">',
      //     '<img src="../../assets/images/pics/slide03.jpg">',
      //     '<img src="../../assets/images/pics/slide04.jpg">',
      //     '<img src="../../assets/images/pics/slide05.jpg">',
      //   ],
      //   options
      // );

var renderer = new SplideRenderer(
        [
          {
            html : '<img src="../../assets/images/pics/slide01.jpg">',
            attrs: {
              dataTest: 1,
              class: 'test',
            },
          },
          {
            html : '<img src="../../assets/images/pics/slide02.jpg">',
            attrs: {
              dataTest: 2,
            },
          },
          {
            html : '<img src="../../assets/images/pics/slide03.jpg">',
            attrs: {
              dataTest: 3,
            },
          },
          {
            html : '<img src="../../assets/images/pics/slide04.jpg">',
            attrs: {
              dataTest: 4,
            },
          },
          {
            html : '<img src="../../assets/images/pics/slide05.jpg">',
            attrs: {
              dataTest: 5,
            },
          },
        ],
        options,
        {
          id: 'test',
          arrows: true,
          slider: true,
        }
      );

var wrapper = document.getElementById( 'wrapper' );
      wrapper.innerHTML = renderer.html();

setTimeout( () => {
        var splide = new Splide( wrapper.firstElementChild, options );
        SplideRenderer.clean( splide );
        splide.mount();
      }, 2000 );
    } );
  </script>
</head>
<body>

<div id="wrapper"></div>
<span>The end of the slider</span>

</body>
</html>