Simple Javascript Slider
Question
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>
4 answers
solution1
1 2014-01-31 04:43:15
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.
solution2
1 2010-09-09 09:20:26
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
solution3
0 2014-03-08 11:44:33
Here you go: jsfiddle
JS:
//init
slides = document.getElementsByClassName("slide");
containerWidth = 500;
Array.prototype.forEach.call(slides, function (el, i) {//set the initial position of each slide
el.style.left = (i * containerWidth) + "px";
});
window.moveSlides = function (direction) {
run = true;
tracker = containerWidth; //500 in this example. We make a separate variable so we can decrement it
if (((direction == "next" && (parseInt(slides[0].style.left) <= (0 - (containerWidth * (slides.length - 1)))))) //compare against 2nd-to-last slide's index, otherwise it'll go 1 slide too far
|| (direction == "prev" && (parseInt(slides[0].style.left) >= 0))) { run = false; }
if (run) {
var slideInterval = setInterval(function () {
moveRate = 4; //set the speed here (use numbers that the container's width can be divided by without a remainder)
Array.prototype.forEach.call(slides, function (el, i) {
if (tracker <= 0) {
clearInterval(slideInterval)
} else {
el.style.left = (direction == "next") ? (parseInt(el.style.left) - moveRate) + "px" : (parseInt(el.style.left) + moveRate) + "px";
}
});
tracker -= moveRate;
}, 1);
}
}
HTML:
<div id="slider-container">
<div id="slider-mask">
<div class="slide one">slide 1</div>
<div class="slide two">slide 2</div>
<div class="slide three">slide 3</div>
<div id="buttons">
<a href="javascript:moveSlides('prev');" id="prev"><Previous</a>
|
<a href="javascript:moveSlides('next');" id="next">Next></a>
</div>
</div>
</div>
CSS:
#slider-container {
width: 999999px;
height: 300px; //set to the height you want
position:relative;
}
#slider-mask {
width:500px; //set slide width. must be equal to slide width
height:300px;
overflow:hidden;
position:relative;
}
.slide {
width:500px;
height:100%;
top:0;
position:absolute;
}
#buttons {
position:absolute;
bottom:5px;
left:50%;
width: 150px;
height:30px;
margin-left:-75px;
}
solution4
0 2010-09-09 09:05:31
Try this one:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.