I've build a site using uMazel starter kit, and the kit uses Owl Carousel plugin to make its slider function. It's an old version (1.3.3), which does not include any basic animation. I can't just replace the CSS and JS, and expect it to work, so what should i do? Do you know any guides or helpful tips?
I know the Owl Carousel is pronounced dead, but i imagine an update is easier than replacing it with tiny_slider.
If Owl Carousel 2.0 suits your needs, then I would download it and look at how it bundles it's css/js and the html used for the slider.
I'd then compare that with what you existingly have in your site.
Eg. yes, you will probably completely replace the owl carousel assets: css and js etc, from the old version to the new versions - but somewhere in the build there will be method that 'calls' the carousel affect and passes any configuration...
something like:
var owl = $('.owl-carousel');
owl.owlCarousel();
it might be in your master view in a <script tag or in a main.js or similarly named javascript file for your custom front end build.
Now you might be passing some configuration into this, eg speed of carousel etc etc and it's possible the latest version of Owl, does it in a different way - but perhaps all you call is the vanilla experience so there will be nothing much to do here, but just ensure the syntax is the same!
The latest version of Owl relies on a minimum version of JQuery 1.8, so check you don't need to 'up' your JQuery version.
Finally somewhere in your solution is the html for the carousel - perhaps in /views/partials/carousel.cshtml - or similar, you'll be able to see where in the page template that a partial is called, or perhaps it's in the page template itself...
Once you've tracked this down it will include the integration with Umbraco to write out the content for the carousel, but you need to compare this html with the html used for the Owl Carousel version 2 - if it's the same! woot all will just work, with the updated assets, otherwise you'll need to tweak the Html to match the version 2 implementaton advice (without breaking the places that Umbraco content is written out!!)
Looks like there is some useful info here on the Owl site:
Updating Owl Carousel
Hey
I've build a site using uMazel starter kit, and the kit uses Owl Carousel plugin to make its slider function. It's an old version (1.3.3), which does not include any basic animation. I can't just replace the CSS and JS, and expect it to work, so what should i do? Do you know any guides or helpful tips?
I know the Owl Carousel is pronounced dead, but i imagine an update is easier than replacing it with tiny_slider.
Thanks in advance.
Andreas
Hi Andreas
If Owl Carousel 2.0 suits your needs, then I would download it and look at how it bundles it's css/js and the html used for the slider.
I'd then compare that with what you existingly have in your site.
Eg. yes, you will probably completely replace the owl carousel assets: css and js etc, from the old version to the new versions - but somewhere in the build there will be method that 'calls' the carousel affect and passes any configuration...
something like:
it might be in your master view in a
<scripttag or in a main.js or similarly named javascript file for your custom front end build.Now you might be passing some configuration into this, eg speed of carousel etc etc and it's possible the latest version of Owl, does it in a different way - but perhaps all you call is the vanilla experience so there will be nothing much to do here, but just ensure the syntax is the same!
The latest version of Owl relies on a minimum version of JQuery 1.8, so check you don't need to 'up' your JQuery version.
Finally somewhere in your solution is the html for the carousel - perhaps in
/views/partials/carousel.cshtml- or similar, you'll be able to see where in the page template that a partial is called, or perhaps it's in the page template itself...Once you've tracked this down it will include the integration with Umbraco to write out the content for the carousel, but you need to compare this html with the html used for the Owl Carousel version 2 - if it's the same! woot all will just work, with the updated assets, otherwise you'll need to tweak the Html to match the version 2 implementaton advice (without breaking the places that Umbraco content is written out!!)
Looks like there is some useful info here on the Owl site:
https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html
good luck!
regards
marc
is working on a reply...