More than 1 easyslide

More than 1 easyslide

Hi,

I'm a Belgian student in computer graphics design and I'm creating a website, using EasySlider 1.7 (among other things). I have no problem adapting my code and EasySlider except for one thing : I have difficulties with putting more than one slider on the same page. I don't see which variable I should change...

Here are the important parts of my code :

jQuery
  1. $(document).ready(function(){ 
                    var currentPosition = 0; 
                    var slideWidth = 300; 
                    var slides = $('.slide'); 
                    var numberOfSlides = slides.length; 
                    $('#slidesContainer').css('overflow', 'hidden'); 
                    slides.wrapAll('<div id="slideInner"></div>').css({
                        'float' : 'left','width' : slideWidth
                    }); 
                    $('#slideInner').css('width', slideWidth * numberOfSlides); 
                    $('#slideshow').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>'); 
                    manageControls(currentPosition); 
                    $('.control').bind('click', function(){
                        currentPosition = ($(this).attr('id')=='rightControl')? currentPosition+1 : currentPosition-1; 
                        manageControls(currentPosition); 
                        $('#slideInner').animate({
                            'marginLeft' : slideWidth*(-currentPosition)
                        }); 
                    }); 
                    function manageControls(position){ 
                        if(position==0){ $('#leftControl').hide() } 
                        else{ $('#leftControl').show() } 
                        if(position==numberOfSlides-1){ $('#rightControl').hide() } 
                        else{ $('#rightControl').show() } 
                    } 
                });
























HTML
  1. <div id=news>
                    <img src="images/news.png"/><br/>
                        <div id="slideshow"> 
                            <div id="slidesContainer"> 
                                <div class="slide"> 
                                    <img src="images/news1.jpg"/>
                                    <div id="slidebg">
                                       
                                    </div>
                                    <div id="slidetitle">
                                            Title 1
                                        </div>
                                        <div id="slidetext">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis massa orci, sed venenatis risus.
                                        </div>
                                        <div id="slidelink">
                                            <a href="#">read more...</a>
                                        </div>
                                </div> 
                                <div class="slide"> 
                                    <img src="images/news2.jpg"/>
                                    <div id="slidebg">
                                       
                                    </div>
                                    <div id="slidetitle">
                                            Title 2
                                        </div>
                                        <div id="slidetext">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis massa orci, sed venenatis risus.
                                        </div>
                                        <div id="slidelink">
                                            <a href="#">read more...</a>
                                        </div>
                                </div> 
                                <div class="slide"> 
                                    <img src="images/news3.jpg"/>
                                    <div id="slidebg">
                                       
                                    </div>
                                    <div id="slidetitle">
                                            Title 3
                                        </div>
                                        <div id="slidetext">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis massa orci, sed venenatis risus.
                                        </div>
                                        <div id="slidelink">
                                            <a href="#">read more...</a>
                                        </div>
                                </div>  
                            </div>
                        </div>
                    </div>


















































CSS
  1. #slideshow #slidesContainer { 
        margin:0 auto; 
        width:300px; 
        height:330px; 
        overflow:auto;
        position:relative; 
    } 

    #slideshow #slidesContainer .slide { 
        margin:0 auto; 
        width:320px;
        height:330px; 
    }

    .control { 
        display:inline; 
        width:24px; 
        height:24px; 
        text-indent:-10000px; 
        position:absolute; 
        cursor:pointer; 
    } 

    #leftControl {
        top:215px; 
        left:5px; 
        background:transparent url(images/control_left.png) no-repeat 0 0;
        z-index:1000;
    } 

    #rightControl { 
        top:215px;
        right:5px; 
        background:transparent url(images/control_right.png) no-repeat 0 0; 


































Can anybody give me any hint ?

Thank you for your help and for your answers !