Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple Javascript Slider

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>
like image 453
MacPython Avatar asked Jun 28 '26 10:06

MacPython


2 Answers

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.

like image 73
user3255925 Avatar answered Jun 30 '26 22:06

user3255925


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

like image 43
Naveed Avatar answered Jul 01 '26 00:07

Naveed