how to use SLIDER in an HTML page

[bhanu08]

hello every one,
Chk out the following link
go through the entire page

http://www.dynamicdriv e.com/dynamicindex17/featuredcontent slider.htm

if u have gone through the link and tested it

Now can any body can tell me how to insert images in to the slider box so that they slide
i had tried my level best but cant be able to know So please guys help

ITS urgent reply me as early as possible

[acoder]

Do you want the auto slide or the manual slide?

A simple view source for the page shows:
[HTML]<div id="slider1" class="contents lide c1">

<div class="contentd iv">
<div><a href="http://www.dynamicdriv e.com/style/csslibrary/item/suckertree-menu-horizontal/">SuckerTre e Menu (h)</a></div>

<img src="http://www.dynamicdriv e.com/cssexamples/suckertree2.gif " border="1" style="float: right; margin: 0 0 1px 5px" />
SuckerTree Horizontal Menu is a CSS and DOM hybrid menu that's list based and supports multiple levels of sub menus.
</div>

<div class="contentd iv">
<div><a href="http://www.dynamicdriv e.com/style/csslibrary/item/half-moon-tab-menu/">Half moon tab menu</a></div>
<img src="http://www.dynamicdriv e.com/cssexamples/halfmoon.gif" style="float: right; margin-left: 5px" border="1" />
We named this CSS tab menu "Half Moon" based on its look. The menu uses a transparent background image for each tab item to create a right round edge.
</div>

<div class="contentd iv">
<div><a href="http://www.dynamicdriv e.com/style/csslibrary/item/slanted-divider-menu/">Slanted Divider Menu</a></div>
<img src="http://www.dynamicdriv e.com/cssexamples/slantedmenu.gif " style="float: right; margin-left: 5px" border="1" />
This is an elegant CSS menu bar that uses a transparent "slanted" image to act as a divider and separate each menu item.
</div>

</div>

<div class="paginati on p1" id="paginate-slider1"></div>

<script type="text/javascript">
ContentSlider(" slider1", 3000)

</script>
[/HTML] for the auto slide and:
[HTML]<div id="slider2" class="contents lide c2">

<div class="contentd iv" style="backgrou nd: url(../dynamicindex4/lightbox2/horses.jpg) center left no-repeat">
</div>

<div class="contentd iv" style="backgrou nd: url(../dynamicindex4/lightbox/pine.jpg) center left no-repeat">
</div>

<div class="contentd iv" style="backgrou nd: url(../dynamicindex4/lightbox/ocean.jpg) center left no-repeat">
</div>

<div class="contentd iv" style="backgrou nd: url(../dynamicindex4/lightbox2/sushi2.jpg) center left no-repeat">
</div>

</div>

<div class="paginati on p2" id="paginate-slider2"></div>

<script type="text/javascript">
ContentSlider(" slider2")
</script>[/HTML] for the manual slide.

Adapt to your needs. Notice in particular, e.g

style="background: url(../dynamicindex4/lightbox/ocean.jpg) center left no-repeat"

for the manual slide. Replace the url with the url to your image.

[bhanu08]

Respeced sir,
Thanx for ur quick reply
i still ahave a small doubt
if i want to insert an image into the slide which is located in my hard disk
for example "C:\pics\main.j pg" then what changes i have to make in the following code

style="background: url(../dynamicindex4/lightbox/ocean.jpg) center left no-repeat"

please give me the correct changes to made in the above code asuming the path to be "C:\pics\main.j pg".

Wating for the Quickest reply

Regards
Bhanu

[acoder]

Why not copy the main.jpg image into the folder containing your html file, or in an images folder in the same folder?