adding two slides

Here's what I got, but I can't get them two work together...can you help

Thanks so much!

Shirley

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/script.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper">
    <div id="container">
        <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
        <div id="slider">
            <ul>
                <li><img src="photos/1.jpg" width="558" height="235" alt="Image One" /></li>
                <li><img src="photos/2.jpg" width="558" height="235" alt="Image Two" /></li>
                <li><img src="photos/3.jpg" width="558" height="235" alt="Image Three" /></li>
                <li><img src="photos/4.jpg" width="558" height="235" alt="Image Four" /></li>
            </ul>
        </div>
        <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
        <ul id="pagination" class="pagination">
            <li onclick="slideshow.pos(0)"></li>
            <li onclick="slideshow.pos(1)"></li>
            <li onclick="slideshow.pos(2)"></li>
            <li onclick="slideshow.pos(3)"></li>
        </ul>
    </div>
</div>

<div id="wrapper">
    <div id="container">
        <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
        <div id="slider">
            <ul>
                <li><img src="photos/blue-fish.jpg" width="558" height="235" alt="Image One" /></li>
                <li><img src="photos/coral-reef.jpg" width="558" height="235" alt="Image Two" /></li>
                <li><img src="photos/sea-turtle.jpg" width="558" height="235" alt="Image Three" /></li>
            </ul>
        </div>
        <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
        <ul id="pagination" class="pagination">
            <li onclick="slideshow.pos(0)"></li>
            <li onclick="slideshow.pos(1)"></li>
            <li onclick="slideshow.pos(2)"></li>
            <li onclick="slideshow.pos(3)"></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider',
    auto:4,
    resume:false,
    vertical:false,
    navid:'pagination',
    activeclass:'current',
    position:0,
    rewind:false,
    elastic:true,
    left:'slideleft',
    right:'slideright'
});
var slideshow1=new TINY.slider.slide('slideshow1',{
    id:'slider',
    auto:4,
    resume:false,
    vertical:false,
    navid:'pagination',
    activeclass:'current',
    position:0,
    rewind:false,
    elastic:true,
    left:'slideleft',
    right:'slideright'
});
</script>
</body>
</html>
asked Jul 5, 2012 by anonymous

1 Answer

0 votes
Your second slider needs a unique ID that corresponds to the markup. And in general IDs are only intended to be used once on a page so you will want to change them up or add classes in addition to the IDs. Don't forget the navid or left/right parameters either.
answered Jul 5, 2012 by Michael (5,600 points)
Powered by Question2Answer