Prototype Carousel

Question

I'm trying to integrate carousel functionality with my Magento store, but failing miserably thus far.

I've looked into owl carousel (http://owlgraphic.com/owlcarousel/) but couldn't manage to integrate it with Magento. I think it could be due to the fact that owl carousel is based on jquery whereas Magento only natively supports prototype-js, not jquery. I'm not too sure about the noConflict procedure.

Would really appreciate a step-by-step guide on integrating either Owl Carousel, or perhaps an alternative Prototype-JS carousel with Magento.

Thanks in advance.

Answer 1

This answer pertains to the OPs wish to use Owl Carousel - it does not address the question of using a carousel with PrototypeJs

You will need to add jQuery if you plan on using OwlCarousel. While it pains me to add a second library next to Prototype, I have used Owl Carousel in the past on Magento installs as well.

1. Either Link a CDN copy of jQuery and add it to your theme's head.phtml file or add jQuery to your skin/js folder and add it to your layout.

E.g. in page.xml (or wherever you need to load jQuery) - if under the default handle, this will load it globally on your front end.

    <reference name="head">
        ...
        <action method="addItem"><type>skin_js</type><name>js/vendor/jQuery/jQuery.1.11.min.js</name></action>
       ...
    </reference>

2. Add the Owl Library in a similar fashion (the default handle will load this globally, but you could easily restrict this to only applicable pages) I placed owl in my skin/frontend/[package]/[theme]/js/vendor/ folder using the example below.

E.g. on page.xml - or appropriate layout document

 <default>
    <reference name="head">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/vendor/OwlCarousel/owl-carousel/owl.carousel.min.js</name>
        </action>
        <action method="addItem">
            <type>skin_css</type>
            <name>js/vendor/OwlCarousel/owl-carousel/owl.carousel.css</name>
        </action>
        <action method="addItem">
            <type>skin_css</type>
            <name>js/vendor/OwlCarousel/owl-carousel/owl.theme.css</name>
        </action>
    </reference>
</default>

3. Implement owl with the template you wish to use it, or better, add a separate script to handle the functionality and add it to your layout.

E.g. if you were to add it directly to the .phtml file where your carousel content is loaded. Obviously the selectors are for demonstration only.

<script>
    (function ($) {
        $(document).ready(function(){
            var brandSlides = $("#hero-slides");

            $(brandSlides).owlCarousel({
                 ... OWL OPTIONS ...
            });
        });
    }(jQuery));
</script>