By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

how to use SLIDER in an HTML page

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

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.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
Jan 24 '07 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
Do you want the auto slide or the manual slide?

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

<div class="contentdiv">
<div><a href="http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/">SuckerTree Menu (h)</a></div>

<img src="http://www.dynamicdrive.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="contentdiv">
<div><a href="http://www.dynamicdrive.com/style/csslibrary/item/half-moon-tab-menu/">Half moon tab menu</a></div>
<img src="http://www.dynamicdrive.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="contentdiv">
<div><a href="http://www.dynamicdrive.com/style/csslibrary/item/slanted-divider-menu/">Slanted Divider Menu</a></div>
<img src="http://www.dynamicdrive.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="pagination p1" id="paginate-slider1"></div>

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

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

<div class="contentdiv" style="background: url(../dynamicindex4/lightbox2/horses.jpg) center left no-repeat">
</div>

<div class="contentdiv" style="background: url(../dynamicindex4/lightbox/pine.jpg) center left no-repeat">
</div>

<div class="contentdiv" style="background: url(../dynamicindex4/lightbox/ocean.jpg) center left no-repeat">
</div>

<div class="contentdiv" style="background: url(../dynamicindex4/lightbox2/sushi2.jpg) center left no-repeat">
</div>

</div>

<div class="pagination 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
Expand|Select|Wrap|Line Numbers
  1. style="background: url(../dynamicindex4/lightbox/ocean.jpg) center left no-repeat"
for the manual slide. Replace the url with the url to your image.
Jan 25 '07 #2

P: 19
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.jpg" then what changes i have to make in the following code

Expand|Select|Wrap|Line Numbers
  1. 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.jpg".

Wating for the Quickest reply

Regards
Bhanu
Jan 26 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Why not copy the main.jpg image into the folder containing your html file, or in an images folder in the same folder?
Jan 26 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.