Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

How do i install jQuery Liquid Carousel plugin on frontend? 
 
Michel_sys82
Jr. Member
 
Total Posts:  25
Joined:  2012-12-08
 

Hi Everyone,

Recently i found this Jquery Carousel http://www.nikolakis.net/liquidcarousel/ and i would like to put this plugin on frontend of my Magento Store. I don’t know how can i do that.  The tutorial says that i have to download Java and css files. The files are:

Css files: Liquidcarousel.css and Style.css
Js files: jquery.liquidcarousel - jquery.liquidcarousel.min - jquery.liquidcarousel.pack and jquery.-1.4.2.min

Below, i described my doubt by parts:

1 - Where can i put this code?

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.liquidcarousel.js"></script>

2 - I put the code below on home.phtml file:

<div id="liquid">
    <
span class="previous"></span>
    <
div class="wrapper">
        <
ul>
            <
li><a href="#"><img src="image.jpg" width="88" height="126" alt="image"/></a></li>
            <
li><a href="#"><img src="image.jpg" width="88" height="126" alt="image"/></a></li>
            <
li><a href="#"><img src="image.jpg" width="88" height="126" alt="image"/></a></li>
            <
li><a href="#"><img src="image.jpg" width="88" height="126" alt="image"/></a></li>
            ...
        </
ul>
    </
div>
    <
span class="next"></span>
</
div>

3 - And finally where can i put the code below?

$(document).ready(function() {
    
$('#liquid').liquidcarousel({height:160});
});
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top