Owl Carousel

1. Carousel - slider responsive

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);