Carousel with text rotation ??

5 replies · opened Aug 28, 2020

EEchionltdAug 28, 2020

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">

								&lt;div class="oc-item"&gt;
									[
							hello1
									](#)
								&lt;/div&gt;
								&lt;div class="oc-item"&gt;
									[
							hello2
									](#)
								&lt;/div&gt;
		
							&lt;/div&gt;

Thanks:)

SSemicolon WebSTAFFAug 29, 2020

Hello,

This is Definitely Supported and any kind of HTML Content is supported inside the Carousel. Consider using this Code:
[ch_pre]

	Text 1


	Text 2


	Text 3


	
	  
	  
	    Default checkbox
	  
	


	Text 4


	Text 5


	Text 6

[/ch_pre]

This will definitely work fine. You can find more examples in the carousel.html Template. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

EEchionltdAug 31, 2020

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:

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

				
									
					&lt;div class="owl-carousel  carousel-widget text-center" data-items-xs="2" data-items-sm="3" data-items-lg="4" data-items-xl="5"&gt;

								&lt;div class="oc-item"&gt;
	Text 1
&lt;/div&gt;
&lt;div class="oc-item"&gt;
	Text 2
&lt;/div&gt;
&lt;div class="oc-item"&gt;
	Text 3
&lt;/div&gt;
									&lt;div class="oc-item"&gt;
	Text 4
&lt;/div&gt;
&lt;div class="oc-item"&gt;
	Text 5
&lt;/div&gt;
&lt;div class="oc-item"&gt;
	Text 6
&lt;/div&gt;

</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" /-->

&lt;!-- Media Agency Demo Specific Stylesheet --&gt;
&lt;link rel="stylesheet" href="assets/demos/app-landing/app-landing.css" type="text/css" /&gt;
&lt;!-- / --&gt;

&lt;link rel="stylesheet" href="assets/css/font-icons.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="assets/one-page/css/et-line.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="assets/css/animate.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="assets/css/magnific-popup.css" type="text/css" /&gt;

&lt;!--link rel="stylesheet" href="assets/demos/articles/articles.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="assets/demos/restaurant/css/fonts.css" type="text/css" /--&gt;


&lt;!--link rel="stylesheet" href="assets/demos/barber/css/fonts.css" type="text/css" /--&gt;

&lt;!-- Bootstrap Switch CSS --&gt;
&lt;link rel="stylesheet" href="assets/css/components/bs-switches.css" type="text/css" /&gt;


&lt;!-- DatePicker CSS --&gt;
&lt;link rel="stylesheet" href="assets/css/components/datepicker.css" type="text/css" /&gt;


&lt;!-- Star Rating CSS --&gt;
&lt;link rel="stylesheet" href="assets/css/components/bs-rating.css" type="text/css" /&gt;


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

&lt;link rel="stylesheet" href="assets/css/colors.php?color=267DF4" type="text/css" /&gt;

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


Let me know if you need more details.

SSemicolon WebSTAFFSep 1, 2020

Apologies about the Inconveniences!

Please provide us with Live URL so that we can check this further.

Thanks for your Patience.

EEchionltdSep 11, 2020

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.:)

SSemicolon WebSTAFFSep 11, 2020

Hello,

Thanks for the Reply. We will check this further and try releasing more examples with Text and Carousels in the near future.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard