Owl Carousel

let param = {
    classParent: 'change-job-steps__body',
    loop: 'true',  // true or false
    margin: '10', // px
    TEXT_NAV_PREV: 'prev', // can add html
    TEXT_NAV_NEXT: 'next', // can add html
};


console.log('Add css');
let data = `
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
`;
console.log(data);

console.log('Add script');
data = `
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
`;
console.log(data);

console.log('Add html');
data = `
<div class="CLASS_PARENT owl-carousel">
  <div> Your Content 1</div>
  <div> Your Content 2</div>
  <div> Your Content 3</div>
  <div> Your Content 4</div>
  <div> Your Content 5</div>
  <div> Your Content 6</div>
  <div> Your Content 7</div>
</div>
`;
data = data.replaceAll('CLASS_PARENT', param.classParent);
console.log(data);


console.log('Add script init');
data = `
<script>
	$('.CLASS_PARENT').owlCarousel({
		loop:LOOP,
		margin:MARGIN,
		responsiveClass:true,
		navText: ['TEXT_NAV_PREV', 'TEXT_NAV_NEXT'],
		responsive:{
			0:{
				items:1,
				nav:true,
				mouseDrag: false,
				dots: true,
			},
			700:{
				items:2,
				nav:true,
				mouseDrag: false,
				margin:30,
				dots: true,
			},
			992:{
				items:4,
				nav:true,
				loop:false,
				mouseDrag: false
			}
		}
	})
</script>
`;
data = data.replaceAll('CLASS_PARENT', param.classParent);
data = data.replaceAll('LOOP', param.loop);
data = data.replaceAll('MARGIN', param.margin);
data = data.replaceAll('TEXT_NAV_PREV', param.TEXT_NAV_PREV);
data = data.replaceAll('TEXT_NAV_NEXT', param.TEXT_NAV_NEXT);
console.log(data);


console.log('Add style for dots and prev-next button');
data = `
.CLASS_PARENT {
  position: relative;
  .owl-nav {
      .owl-prev,
      .owl-next {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          i {
              font-size: 60px;
              color: red;
          }
      }
      .owl-prev {
          left: 0;
      }
      .owl-next {
          right: 0;
      }
  }
  .owl-dots {
      text-align: center;
      .owl-dot {
          width: 10px;
          height: 10px;
          border: 1px solid #000;
          border-radius: 50%;
          margin-right: 5px;
          &.active {
              background-color: red;
              border: none;
          }
      }
  }
}
`;
data = data.replaceAll('CLASS_PARENT', param.classParent);
console.log(data);