jquery conflict?

[silent lover]

i create 2 sliders within one page with code :

<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript">
    var $jq132 = $.noConflict();
</script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var $ = jQuery.noConflict();
    $(document).ready( function($){
        // buttons for next and previous item                        
        var buttons = { previous:$('#jslidernews1 .button-next') ,
                        next:$('#jslidernews1 .button-previous') };         
         $('#jslidernews1').lofJSidernews( { interval : 5000,
                                            direction       : 'opacitys',   
                                            easing          : 'easeInOutKesatu',
                                            duration        : 1200,
                                            auto            : true,
                                            maxItemDisplay  : 7,
                                            start_item      : 2,
                                            navPosition     : 'horizontal', // horizontal
                                            navigatorHeight : 58,
                                            navigatorWidth  : 57,
                                            mainWidth       : 470,
                                            buttons         : buttons } );
        // buttons for next and previous item                        
        var buttons = { previous:$('#jslidernews2 .button-next') ,
                        next:$('#jslidernews2 .button-previous') };         
         $('#jslidernews2').lofJSidernews( { interval : 5000,
                                            direction       : 'opacitys',   
                                            easing          : 'easeInOutExpo',
                                            duration        : 1200,
                                            auto            : true,
                                            maxItemDisplay  : 7,
                                            start_item      : 2,
                                            navPosition     : 'horizontal', // horizontal
                                            navigatorHeight : 58,
                                            navigatorWidth  : 57,
                                            mainWidth       : 470,
                                            buttons         : buttons } );  
    })($jq132);
</script>

but only one slider can be clicked. how to make 2 sliders can be clicked?

[pixelsoul]

I am not completely sure what "only one slider can be clicked" but I imagine you are talking about the buttons. If that is the case you might want to try something like this.

<script type="text/javascript">
var $ = jQuery.noConflict();
    $(document).ready( function($){


        // buttons for next and previous item                        
        var buttons1 = { previous:$('#jslidernews1 .button-next') ,
                        next:$('#jslidernews1 .button-previous') };         
         $('#jslidernews1').lofJSidernews( { interval : 5000,
                                            direction       : 'opacitys',   
                                            easing          : 'easeInOutKesatu',
                                            duration        : 1200,
                                            auto            : true,
                                            maxItemDisplay  : 7,
                                            start_item      : 2,
                                            navPosition     : 'horizontal', // horizontal
                                            navigatorHeight : 58,
                                            navigatorWidth  : 57,
                                            mainWidth       : 470,
                                            buttons         : buttons1 } );


        // buttons for next and previous item                        
        var buttons2 = { previous:$('#jslidernews2 .button-next') ,
                        next:$('#jslidernews2 .button-previous') };         
         $('#jslidernews2').lofJSidernews( { interval : 5000,
                                            direction       : 'opacitys',   
                                            easing          : 'easeInOutExpo',
                                            duration        : 1200,
                                            auto            : true,
                                            maxItemDisplay  : 7,
                                            start_item      : 2,
                                            navPosition     : 'horizontal', // horizontal
                                            navigatorHeight : 58,
                                            navigatorWidth  : 57,
                                            mainWidth       : 470,
                                            buttons         : buttons2 } );  
    })($jq132);
</script>

[silent lover]

thank you for the answer, i try to change(differentiate) var buttons but no significant result happens. What i mean is that javascript create two slider within one page. when i clicked "new item" the slider on "hot item" become display none, and vice versa.

I attached the problem screenshot which i got it from the website : http://eligium.gemscool.com/. The new item slider cannot be clicked, but hot item slider can be clicked. How to make both slider can be clicked?

[silent lover]

Any solution from everyone?

[pixelsoul]

It appears the link to the site you posted is not working. Is that your site where the problem is?

It may be easier to understand the problem if we saw it live somewhere, or at least in a jsFiddle page.