Coder Wrap provides free to use snippets

.owl-nav button {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-left: 3px solid #000 !important;
  border-bottom: #000 3px solid !important;
  margin-top: -12px;
}

.owl-nav button.owl-prev {
  left: -15px;
  transform: rotate(45deg);
}

.owl-nav button.owl-next {
  right: -15px;
  transform: rotate(-135deg);
}

.owl-nav button span {
  display: none;
}

.owl-dots button {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: #000 !important;
  margin: 0px 3px;
  opacity: 0.6;
}

.owl-dots {
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.owl-dots button.owl-dot.active {
  opacity: 1;
}

.owl-item.active.center {
  position: relative;
}
.owl-item.active.center:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 98%;
  height: 98%;
  border: red 3px solid;
}
.owl-video-play-icon {
  background: url(../images/owl.video.play.png) !important;
}

.video-slider .item-video {
  height: 300px;
}

/**Basic Slider Start**/
$('.basic-slider').owlCarousel({
	loop: true,
	margin: 10,
	nav: true,
	responsive: {
		0: {
			items: 1
		},
		600: {
			items: 3
		},
		1000: {
			items: 5
		}
	}
})
/**Basic Slider End**/
/**Video Slider Start**/
$('.video-slider').owlCarousel({
	items: 1,
	merge: true,
	loop: true,
	margin: 10,
	video: true,
	lazyLoad: true,
	center: true,
	responsive: {
		480: {
			items: 2
		},
		600: {
			items: 4
		}
	}
})
/**Video Slider End**/
/**Responsive Start**/
$('.responsive-slider').owlCarousel({
	loop: true,
	margin: 10,
	nav: true,
	responsive: {
		0: {
			items: 1
		},
		600: {
			items: 3
		},
		1000: {
			items: 4
		}
	}
})
/**Responsive Slider End**/
/**Singal Slider Start**/
$('.singal-slider').owlCarousel({
	loop: true,
	nav: true,
	items: 1
});
/**Singal Slider End**/
/**Center Mode Slider Start**/
$('.center-mode-slider').owlCarousel({
	center: true,
	items: 2,
	loop: true,
	margin: 10,
	responsive: {
		600: {
			items: 4
		}
	}
});
/**Center Mode Slider End**/
/**Autowidth Slider Start**/
$('.autowidth-slider').owlCarousel({
	margin: 10,
	loop: true,
	autoWidth: true,
	items: 4
});
/**Autowidth Slider End**/