Change Owl Carousel to "Linear" Topic is solved

Need help with the Administration of your Joomla! 3.x site? This is the spot for you.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
mailblade
Joomla! Intern
Joomla! Intern
Posts: 78
Joined: Sat Jan 16, 2016 7:46 am

Change Owl Carousel to "Linear"

Post by mailblade » Tue Sep 03, 2019 9:49 am

I purchased a template which had the "Owl Carousel" module already installed. I created a module, added my images and adjusted some settings.

In the module back-end, there is an option for "Items", "autoplay" and "autoplayInterval". I set "Items" to 4, "autoplay" to true and "autoplayInterval" to 1000 (ms).

It displays 4 images. After 1 second, it moves to the next image by doing a non-fluid animation. Meaning, it does a "swing" type of animation and stops on the 5th image. It then waits another second, then does the animation to the 6th image, 7th image etc.

At least the "loop" is working, as it goes through all images and starts over. Now, I searched online and found multiple answers on StackOverflow and some other sites.

I do EXACTLY what the answers state. I add "smartSpeed" value, add a "slideTransition" effect ("linear") and so on.

What happens then is this: The carousel does a sliding animation, but only the fifth image. It does not continue further.

Here is the code for the carousel:

Code: Select all

			c.owlCarousel({
	    	              autoplay: c.attr("data-autoplay") === "true",
	    	              autoplayTimeout: '.$autoplay_opt.',
	    	              loop: c.attr("data-loop") == "true",
	    	              nav: c.attr("data-nav") === "true",
	    	              dots: c.attr("data-dots") === "true",
	    	              dotsEach: c.attr("data-dots-each") ? parseInt(c.attr("data-dots-each")) : false,
	    	              responsive: responsive,
	    	               navText: [],

I add all the extra input variables such as "slideTransition" etc. but it still stops at the 5th image! It is very frustrating. Any advice is appreciated.

mailblade
Joomla! Intern
Joomla! Intern
Posts: 78
Joined: Sat Jan 16, 2016 7:46 am

Re: Change Owl Carousel to "Linear"

Post by mailblade » Tue Sep 03, 2019 1:26 pm

I solved it. Used the JS from the below link:

https://codepen.io/osingh/pen/wOqrPX?editors=0010#0

I created a new owlcarousel.js file, linked that in my website head, added the html and added the script for the Owl Carousel.


Post Reply

Return to “Administration Joomla! 3.x”