replace-with-slick.js

const JS_RESOURCE =
  '//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js';
const CSS_RESOURCE = [
  '//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css',
  '//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css',
];

const appendStyleToHead = () => {
  const linkTags = CSS_RESOURCE.map(
    url => ` <link rel="stylesheet" type="text/css" href=${url} />`,
  ).join('\n');
  $('head').append(linkTags);
};

const loadScripts = callback => {
  $.getScript(JS_RESOURCE, callback);
};

const removeElement = () => {
  $(
    '.images-container .media-container-row .img-item.col-md-6.col-lg-6.item-text .skrollable',
  ).remove();
};

const addNewElement = () => {
  const rectangleElement = $(
    '.images-container .media-container-row .img-item.col-md-6.col-lg-6.item-text .Rectangle-77',
  );
  rectangleElement.after(`
    <div class="services-descriptions">
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
    </div>
  `);
};

const initSlick = () => {
  $('.services-descriptions').slick({
    infinite: true,
    autoplay: true,
    autoplaySpeed: 2000,
  });
};

$(document).ready(() => {
  loadScripts(() => {
    appendStyleToHead();
    removeElement();
    addNewElement();
    initSlick();
  });
});