How to call sly scroller plugin effects multiple times in a single page?

Question

I am new to Jquery and my problem is like, I am not able to call the plugin effect in different parts of the page..I have an html component like below...

<div class="frame" class="basic" style="overflow: hidden;">
<ul class="slidee" style="-webkit-transform: translateZ(0px) translateX(-4788px); width: 6840px;">
<li>
<div class="thumbnail">
<img src="Files/a6.jpg" class="zthumb">
<div class="caption">
<p><small><a href="#">Car 6</a></small></p><p>
 </p><p><strong>10 EUR</strong></p>
 </div>
</div>
<li>
<div class="thumbnail">
<img src="Files/a6.jpg" class="zthumb">
<div class="caption">
<p><small><a href="#">Car 6</a></small></p><p>
</p><p><strong>10 EUR</strong></p>
</div>
 </div>
</li>
</div>

im using 3 scripts

<script src="sly.js" type="text/javascript" ></script>
<script src="horizontal.js"></script>
<script src="plugins.js"></script>

horizontal.js has the following components

jQuery(function($){
    'use strict';   
(function () {
        var $frame  = $('#basic');
        var $slidee = $frame.children('ul').eq(0);
        var $wrap   = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'basic',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 3,
            scrollBar: $wrap.find('.scrollbar'),
            scrollBy: 1,
            pagesBar: $wrap.find('.pages'),
            activatePageOn: 'click',
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Buttons
            forward: $wrap.find('.forward'),
            backward: $wrap.find('.backward'),
            prev: $wrap.find('.prev'),
            next: $wrap.find('.next'),
            prevPage: $wrap.find('.prevPage'),
            nextPage: $wrap.find('.nextPage')
        });

        // To Start button
        $wrap.find('.toStart').on('click', function () {
            var item = $(this).data('item');
            // Animate a particular item to the start of the frame.
            // If no item is provided, the whole content will be animated.
            $frame.sly('toStart', item);
        });

        // To Center button
        $wrap.find('.toCenter').on('click', function () {
            var item = $(this).data('item');
            // Animate a particular item to the center of the frame.
            // If no item is provided, the whole content will be animated.
            $frame.sly('toCenter', item);
        });

        // To End button
        $wrap.find('.toEnd').on('click', function () {
            var item = $(this).data('item');
            // Animate a particular item to the end of the frame.
            // If no item is provided, the whole content will be animated.
            $frame.sly('toEnd', item);
        });

        // Add item
        $wrap.find('.add').on('click', function () {
            $frame.sly('add', '<li>' + $slidee.children().length + '</li>');
        });

        // Remove item
        $wrap.find('.remove').on('click', function () {
            $frame.sly('remove', -1);
        });
    }());
});

how can i have the similar effect in a div in the same page like another frame ...What is the method for calling a same plugin in different parts of a single page?

i had included the other files here http://jsfiddle.net/renmathew/34RV3/2/

How to call sly scroller plugin effects multiple times in a single page?

0 Answers0