CODEWITHSUNDEEP
javascriptjquerymagentocarousel
BnJ
BnJ

Reputation: 1044

Include two JavaScript files for a carousel

On my Magento site, I included two jQuery scripts for two kind of carousels:

<script src="<?php echo $this->getSkinUrl('js/jquery.rs.carousel.js') ?>"></script>
<script src="<?php echo $this->getSkinUrl('js/carousel.js') ?>"></script>

My problem occurs when creating carousels. I do not know how to call a script instead of the other.

When I use this:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.un-prod-carousel').carousel();
    });
</script>

It creates me a carousel with jquery.rs.carousel.js (that's what I want).

But when I want to create a carousel with carousel.js :

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#prod-sim-carousel').carousel({itemsPerPage: 5, itemsPerTransition: 5});
    });
</script>

It does not work, because I think it calls the function of jquery.rs.carousel.js, and not of carousel.js.

Can you tell me how to call the function of a particular script?

Upvotes: 0

Views: 219

Answers (1)

Michał
Michał

Reputation: 2484

Maybe not the best but working solution would be saving one of this scripts, e.g. carousel.js and locally change 

$.fn.carousel = function(options) {
return this.each(function() {
var obj = Object.create(Carousel);
obj.init($(this), options);
$.data(this, 'carousel', obj);
});
};

to:

$.fn.otherCarousel = function(options) {
return this.each(function() {
var obj = Object.create(Carousel);
obj.init($(this), options);
$.data(this, 'carousel', obj);
});
};

And call it as $(selector).otherCarousel()

Upvotes: 1

Related Questions