<link
    rel="stylesheet"
    type="text/css"
    href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
  />
 <link
    rel="stylesheet"
    type="text/css"
    href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
  />
  <link
    rel="stylesheet"
    type="text/css"
    href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
  />

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- Slick JS -->
  <script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
  ></script>

</head>
<body style="padding: 0; margin: 0;">

  <section class="ca-timeline">
      <div class="ca-timeline-slider">
        <?php foreach ($slides as $slide): ?>
        <div>
          <div class="ca-timeline-card">
            <h4 class="ca-timeline-title"><?php echo esc_html($slide->title); ?></h4>
            <p class="ca-timeline-description">
              <?php echo esc_html($slide->description); ?>
            </p>
            <time class="ca-timeline-year" datetime="<?php echo esc_html($slide->year); ?>"><?php echo esc_html($slide->year); ?></time>
          </div>
        </div>        
        <?php endforeach; ?>
    </div>
       
    
  </section>



  <script>
    $(document).ready(function () {
      $('.ca-timeline-slider').slick({
         slidesToShow: 5,
        slidesToScroll: 1,
        dots: false,
        arrows: false,
        infinite: true,       
        autoplay: true,
        cssEase: 'linear',       
        responsive: [
          {
            breakpoint: 1280,
            settings: {
              slidesToShow: 4,
              slidesToScroll: 1,
            }
          },
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 1,
            }
          },
          {
            breakpoint: 767,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
            }
          },
           {
            breakpoint: 500,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
            }
          }
        ]
      });

      $('.left-arrow').click(function () {
        $('.slick-prev').trigger('click');
      });

      $('.right-arrow').click(function () {
        $('.slick-next').trigger('click');
      });
    });

   

  </script>

</body>