JSFiddle - React, Tailwind, and code Playground

by nicolas tenorio

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">

<div class="slider" id="output"></div>

CSS

.slick-dots li button {
    /* more CSS */
}
#img{
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

#im{
  position: absolute;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  margin: auto;
}

JavaScript

$(document).ready(function(){
	$('.slider').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 7000,
  
});
		

$.ajax({
  type: 'GET',
  url: "https://www.metrocali.gov.co/wp/wp-json/wp/v2/posts",
  dataType: 'json',
  success: function(result) {
console.log(result[0])

  for (var i = 0; i < result.length; i++) {

   var entry = result[i].yoast_head_json
   var img = entry.og_image[0].url
   var match = "<p>(.+)<\/p>\n<p>"
   var match2 = /(.+?)\.(.+?)\.(.+)/g
   var text = entry.og_description;

  
   
    $('.slider').slick('slickAdd',

     '<div><table ><tr><td><a target="_blank" href="' + entry.og_link + '"><div id="img"><img id="im" style="width: 100%;" src="'+img+'"/><div></a></td><td><table style="width: 300px;"><tr><td><a class="title" target="_blank" href="' + entry.og_link + '">'+entry.og_title+'</a></td></tr><tr><td><p style="text-align:left">' + text + '</p><div style="text-align:right;margin-top: -12px;font-size: 12px;color: #e7d342;"><p>' + entry.article_published_time + '</p><p style="margin-top:-12px"><a href="'+ result[i].uagb_author_info.author_link +'">'+ result[i].uagb_author_info.display_name +'</a></p></div></td></tr></table></td></tr></table></div>'); 
      
  }}
});
	  
});