Librerie Utili

Scaricare file, e instanziare come mostrato sotto, comprende già l'uso di risorse esterne come css

// reference the Dompdf namespace
use Dompdf\Dompdf;

// instantiate and use the dompdf class
$dompdf = new Dompdf();
$options = $dompdf->getOptions();
$options->setIsRemoteEnabled(true);
$dompdf->loadHtml('hello world');

// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'landscape');

// Render the HTML as PDF
$dompdf->render();

// Output the generated PDF to Browser
$dompdf->stream();

CDN CSS

https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css

CDN JS

https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js

Struttura HTML

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Inizializzazione JS, con alcuni parametri custom

const swiper = new Swiper('.swiper', {
        // Optional parameters
        /* direction: 'vertical', */
        loop: false,
        /* touchReleaseOnEdges: true, */
        /* mousewheel: true, */
        speed: 750,
        autoHeight: true,
        loop: true,
        autoplay: {
          delay: 7000, /* ogni quanto lo slider deve cambiare slide */
        },
        on: {
          init: function () {
            /* azione da fare all'iniziazione dello slider */
          },
        },
        // If we need pagination
        /* pagination: {
            el: '.swiper-pagination',
            clickable: true
        }, */
        keyboard: {
          enabled: true,
          onlyInViewport: false
        },
        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        
        breakpoints: {
          // when window width is >= 640px
          640: {
            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next.pubblicazioni',
                prevEl: '.swiper-button-prev.pubblicazioni',
            },
          }
        }
    });