Question

Iam tyring to use this slider: http://www.menucool.com/javascript-image-slider

BUT when Iam trying to use a code like this, iam unable to get the output..

<table>
<tr>
<td>

<div id="sliderFrame">       
        <div id="slider">
            <a href="http://www.google.com" target="_blank">
                <img src="JSImageSlider/images/image-slider-1.jpg" alt="Welcome to Google"  />
            </a>
            <img src="JSImageSlider/images/image-slider-2.jpg" alt="" width="1200px"/>
            <img src="JSImageSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="JSImageSlider/images/image-slider-4.jpg" alt="#htmlcaption" />
            <img src="JSImageSlider/images/image-slider-5.jpg"/>
        </div>

    </div>
</td>

<td>
<div id="sliderFrame">       
        <div id="slider">
            <a href="http://www.google.com" target="_blank">
                <img src="JSImageSlider/images/image-slider-1.jpg" alt="Welcome to Google"  />
            </a>
            <img src="JSImageSlider/images/image-slider-2.jpg" alt="" width="1200px"/>
            <img src="JSImageSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="JSImageSlider/images/image-slider-4.jpg" alt="#htmlcaption" />
            <img src="JSImageSlider/images/image-slider-5.jpg"/>
        </div>

    </div>
</td>
</tr>
</table>

Answer 1

First: double your slider id. ID = identity of element! Mark sliderFrame as class. Like this:

<table>
<tr>
<td>

<div class="sliderFrame">       
        <div id="slider">
            <a href="http://www.google.com" target="_blank">
                <img src="images/image-slider-1.jpg" alt="Welcome to Google"  />
            </a>
            <img src="images/image-slider-2.jpg" alt="" width="1200px"/>
            <img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
            <img src="images/image-slider-5.jpg"/>
        </div>

    </div>
</td>

<td>
<div class="sliderFrame">       
        <div id="slider2">
            <a href="http://www.google.com" target="_blank">
                <img src="images/image-slider-1.jpg" alt="Welcome to Google"  />
            </a>
            <img src="images/image-slider-2.jpg" alt="" width="1200px"/>
            <img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
            <img src="images/image-slider-5.jpg"/>
        </div>

    </div>
</td>
</tr>
</table>

Second: change your css file:

.sliderFrame {position:relative;width:700px;margin: 0 auto;} 

#slider, #slider2 {
    width:700px;height:306px;
    background:#fff url(loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;
    box-shadow: 0px 1px 5px #999999;
}
#slider img, #slider2 img {
    position:absolute;
    border:none;
    display:none;
}

And the last one: your js code must implement another instance of your slider:

var sliderOptions=
{
    sliderId: "slider",
    effect: "series1",
    effectRandom: false,
    pauseTime: 2600,
    transitionTime: 500,
    slices: 12,
    boxes: 8,
    hoverPause: true,
    autoAdvance: true,
    captionOpacity: 0.3,
    captionEffect: "fade",
    thumbnailsWrapperId: "thumbs",
    license: "free"
};

var sliderOptions2 =
{
    sliderId: "slider2",
    effect: "series1",
    effectRandom: false,
    pauseTime: 2600,
    transitionTime: 500,
    slices: 12,
    boxes: 8,
    hoverPause: true,
    autoAdvance: true,
    captionOpacity: 0.3,
    captionEffect: "fade",
    thumbnailsWrapperId: "thumbs2",
    license: "free"
};

var imageSlider=new mcImgSlider(sliderOptions);
var imageSlider2=new mcImgSlider(sliderOptions2);

Thats all. Table tag is innosent =)