Carousel with text rotation ??

Hi,

I simply wanted to implement text(timings) to be scrolled using carousel. Not sure how I can do this??

Below is my code: (As you can see not much as its not working.)

I have also attached the result which I am trying to achieve but not sure how I can implement as text carousel or kind of free type where I can add radio button or checkbox even as carousel items.

<div class="owl-carousel image-carousel carousel-widget" data-items-xs="2" data-items-sm="3" data-items-lg="4" data-pagi="false" data-nav="true" data-items-xl="5">

								<div class="oc-item">
									[
							hello1
									](#)
								</div>
								<div class="oc-item">
									[
							hello2
									](#)
								</div>
		
							</div>

Thanks:)

Hi,

Its still not working as carousel seems broken if you look at my first attached image, then you'll find that the background somehow coming gray.

The second issue image is showing that, when I press the next arrow button the text going out of the area and still stay visible. so can you help me that what's wrong with this??

My Code inside the first tab area and also inside the box div:

								<div class="tab-content clearfix" style="border:0px solid red; padding:10px;" id="tabs-33">
									<div class="content-wrap pb-0">
			<div class="container">

				
									
					<div class="owl-carousel  carousel-widget text-center" data-items-xs="2" data-items-sm="3" data-items-lg="4" data-items-xl="5">

								<div class="oc-item">
	Text 1
</div>
<div class="oc-item">
	Text 2
</div>
<div class="oc-item">
	Text 3
</div>
									<div class="oc-item">
	Text 4
</div>
<div class="oc-item">
	Text 5
</div>
<div class="oc-item">
	Text 6
</div>

</div>
</div>

Also my added files,
<link href="https://fonts.googleapis.com/css?family=Cookie|Open+Sans:400,600,700,800,900|Poppins:300,400,500,600,700|Playfair+Display:400,400i,700,700i,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="assets/style.css" type="text/css" />
<!--link rel="stylesheet" href="assets/css/dark.css" type="text/css" /-->

<!-- Media Agency Demo Specific Stylesheet -->
<link rel="stylesheet" href="assets/demos/app-landing/app-landing.css" type="text/css" />
<!-- / -->

<link rel="stylesheet" href="assets/css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="assets/one-page/css/et-line.css" type="text/css" />
<link rel="stylesheet" href="assets/css/animate.css" type="text/css" />
<link rel="stylesheet" href="assets/css/magnific-popup.css" type="text/css" />

<!--link rel="stylesheet" href="assets/demos/articles/articles.css" type="text/css" />
<link rel="stylesheet" href="assets/demos/restaurant/css/fonts.css" type="text/css" /-->


<!--link rel="stylesheet" href="assets/demos/barber/css/fonts.css" type="text/css" /-->

<!-- Bootstrap Switch CSS -->
<link rel="stylesheet" href="assets/css/components/bs-switches.css" type="text/css" />


<!-- DatePicker CSS -->
<link rel="stylesheet" href="assets/css/components/datepicker.css" type="text/css" />


<!-- Star Rating CSS -->
<link rel="stylesheet" href="assets/css/components/bs-rating.css" type="text/css" />


<link rel="stylesheet" href="assets/css/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="assets/css/colors.php?color=267DF4" type="text/css" />

<link rel="stylesheet" href="assets/demos/hosting/hosting.css" type="text/css" />


Let me know if you need more details.

Thanks for your reply but at the moment the project is under development so it's not much to share.

However, we have replaced with another plugin slick slider & its working well.

So thanks for your help.:)