Hello
I want to create a slider for 5 divs i have but only show 3 unless i click an arrow to slide them over.

My Code for the area where i want the slider to be is:

        <div class="pricing-table" style="border-left:1px solid #BFBFBF;">
          <div class="column features" style="width: 332px; float: left;">
            <div class="toprow"><h3>The<br>Plan<br>Features:</h3></div>
            <div><span>Storage Space</span></div>
            <div><span>Brandwith /pm</span></div>
            <div><span>SQL Databases</span></div>
            <div><span>Subdomains</span></div>
            <div><span>Parked Domains</span></div>
            <div><span>Addon Domains</span></div>
            <div><span>FTP Accounts</span></div>
            <div><span>Email Accounts</span></div>
            <div style="height: 22px;"><span>CGI Access</span></div>
            <div style="height: 22px;"><span>cPanel 11</span></div>
            <div class="botrow"><span>Order</span></div>
          </div>
          <div id="packages">
            <div class="bronze column" style="width: 209px; float: left; text-align: center;">
              <div class="toprow slideleft"><h3>Bronze</h3><br><span class="price">FREE</span></div>
              <div>158 MB</div>
              <div>2000 MB</div>
              <div>11</div>
              <div>15</div>
              <div>4</div>
              <div>4</div>
              <div>3</div>
              <div>5</div>
              <div><img alt="" src="./images/mini-icons/no.png" class="icon"></div>
              <div><img alt="" src="./images/mini-icons/yes.png" class="icon"></div>
              <div class="botrow"><a href="#" class="big-btn green aligncenter">Sign Up !</a></div>
            </div>
            <div class="silver column" style="width: 209px; float: left; text-align: center;">
              <div class="toprow"><h3>Silver</h3><br><span class="price">50p</span></div>
              <div>846 MB</div>
              <div>3690 MB</div>
              <div>570</div>
              <div>800</div>
              <div>400</div>
              <div>400</div>
              <div>370</div>
              <div>520</div>
              <div><img alt="" src="./images/mini-icons/yes.png" class="icon"></div>
              <div><img alt="" src="./images/mini-icons/yes.png" class="icon"></div>
              <div class="botrow"><a href="#" class="big-btn blue aligncenter">Order Now !</a></div>
            </div>
            <div class="Gold column" style="width: 209px; float: left; text-align: center;">
              <div class="toprow"><h3>Gold</h3><br><span class="price">99p</span></div>
              <div>2024 MB</div>
              <div>20000 MB</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div><img alt="" src="./images/mini-icons/yes.png" class="icon"></div>
              <div><img alt="" src="./images/mini-icons/yes.png" class="icon"></div>
              <div class="botrow"><a href="#" class="big-btn orange aligncenter">Order Now !</a></div>
            </div>
            <div class="Platinum column" style="width: 209px; float: left; text-align: center;">
              <div class="toprow"><h3>Platinum</h3><br><span class="price">&pound;2</span></div>
              <div>5054 MB</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div><img alt="" src="./images/mini-icons/yes.png" class="icon"></div>
              <div><img alt="" src="./images/mini-icons/yes.png" class="icon"></div>
              <div class="botrow"><a href="#" class="big-btn red aligncenter">Order Now !</a></div>
            </div>
            <div class="Diamond column" style="width: 209px; float: left; text-align: center;">
              <div class="toprow"><h3>Diamond</h3><br><span class="price">&pound;5</span></div>
              <div>8078 MB</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div>Unlimited</div>
              <div><img alt="" src="./images/mini-icons/yes.png" class="icon"></div>
              <div><img alt="" src="./images/mini-icons/yes.png" class="icon"></div>
              <div class="botrow"><a href="#" class="big-btn green aligncenter">Order Now !</a></div>
            </div>

I want the slider to use the divs within the div with the id 'packages'.

Thanks if you can help me.

Take your pick

Originally Posted by chrishirst

Take your pick

Yeah, i wouldnt have came here unless i couldnt find it on google.

Although whilst searching google i came across some jquery called serialsrcoll but i dont know how to use it

Originally Posted by chrishirst's sig

Chris. ->> Links are advertising NOT optimising!! <<-

Resolved!

Ive done it now, no thanks to webmaster-talk.
For anyone who wants to know how to do something like this search google for jcarousel.