Im trying to find a very very simple javascript slider. One that is the bare minimum, no fancy jquery, or other libraries involved. The simplest possible slider. With the minimum amount of code possible.
Thanks for the attention!
@ Roger Walsh:
Below the HTML code: The .js and the .css are identical to the example in the tutorial you send me. I guess I have to add some more info in the body section, but I dont understand what exactly.
<!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">
<html>
<head>
<title> Slider </title>
<script type="JavaScript" src="slider.js"></script>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<html>
<head>
<title> </title>
<script type="text/javascript">
</script>
</head>
<body>
<div class="carpe_slider_display_holder">
<!-- Default value: 0 -->
<input class="carpe_slider_display" id="display1" type="text" value="100" />
</div>
<div class="carpe_horizontal_slider_track">
<div class="carpe_slider_slit"> </div>
<div class="carpe_slider" id="my_id" orientation="horizontal" distance="100" display="my_id" style="left: 100px;"> </div>
</div>
<!--<div class="carpe_horizontal_slider_track">
<div class="carpe_slider_slit"> </div>
<div class="carpe_slider"
id="my_id"
orientation="horizontal"
distance="100"
display="my_id"
style="left: 100px;"> </div>
</div>
-->
</body>
</html>
The Carpe Slider is now at version 3.0, and there is documentation here: http://carpe.ambiprospect.com/slider/documentation.htm and a test page: http://carpe.ambiprospect.com/slider/test.htm
The js code is 4 kB compressed.
If you want to code less and in quick time, I will recommend you to use an existing library for this.
Look at dhtmlx Slider
Simplest Slider Example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With