Canvas Support

owl-carousel not auto playing

4 replies·opened May 31, 2019
S
sathyannairMay 31, 2019

Hi,

I have used class="owl-carousel owl-carousel-full image-carousel carousel-widget" data-loop="true" data-autoplay="5000" data-speed="700" data-rewind="true".

But it is not playing automatically.

Can you suggest what I need to do?

My url is https://alignitsolutions.com

Thanks

S
SemiColonWebSTAFFJun 1, 2019

Hello,

Apologies about the Inconveniences caused!

Please find the following code in the HTML File: 

<script>
	// Owl Carousel Scripts
	$('#oc-features').owlCarousel({
		items: 1,
		margin: 60,
		nav: true,
		navText: ['<i class="icon-line-arrow-left"></i>','<i class="icon-line-arrow-right"></i>'],
		dots: false,
		stagePadding: 30,
		responsive:{
			768: { items: 2 },
			1200: { stagePadding: 200 }
		},
	});
</script>

and replace it with the following code: 

<script>
	// Owl Carousel Scripts
	$('#oc-features').owlCarousel({
		items: 1,
		margin: 60,
	    nav: true,
	    navText: ['<i class="icon-line-arrow-left"></i>','<i class="icon-line-arrow-right"></i>'],
	    dots: false,
	    stagePadding: 30,
	    responsive:{
			768: { items: 2 },
			1200: { stagePadding: 200 }
		},
		autoplay: true,
		autoplayTimeout: 5000,
		autoplayHoverPause: true
	});
</script>

This will definitely work fine. Hope this Helps!

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

S
sathyannairJun 2, 2019

Thanks. It is now auto replaying.

Now how do I get that to auto rewind to the start?

Also if the width is greater than 1200px, the carousel displays some part of another slide. So if I chose for full screen on my laptop, the carousel display is looks strange.

Please check the attachment.

How do I fix this?

S
sathyannairJun 3, 2019

Hi,

If I widen the window, the owl-carousel displays one and a half slide, which looks awkward.

Please find the attachment.

Please advice me how I can fix this.

Thanks.

S
SemiColonWebSTAFFJun 3, 2019

Hello,

Apologies about the Inconveniences caused!

This is the Default Design Functionality of the Carousel in this Template. Simply delete the following line of code from Carousel JS Code at the bottom fo your HTML File: 

1200: { stagePadding: 200 }

Additionally, you can simply add the rewind: true, Option to the JS Code to enable rewind functionality on the Carousel.

This will definitely work fine. Hope this Helps!

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

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