Simple Javascript Slider

Question

Simple Javascript Slider

I am trying to find a very simple javascript slider. The one that is minimal does not have fancy jquery or other libraries. The easiest slider. A minimal amount of code is possible.

Thank you for the attention!

@ Roger Walsh:

Below the HTML: .js and .css are identical to the example in the tutorial that you send me. I think I need to add additional information to the body section, but I don’t 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>

+3

javascript slider

Macpython Sep 09 '10 at 8:55

source share

4 answers

NAVEED · Answer 1 · 2010-09-09T09:20:26+0000

If you want less code and fast, I recommend that you use the existing library for this.

Check out dhtmlx Slider

An example of a simple slider

user3255925 · Answer 2 · 2014-01-31T04:43:15+0000

Carpe Slider 3.0, : http://carpe.ambiprospect.com/slider/documentation.htm : http://carpe.ambiprospect.com/slider/test.htm

js 4 .

Roger Walsh · Answer 3 · 2010-09-09T09:05:31+0000

Try the following:

http://carpe.ambiprospect.com/slider/

Cooper maruyama · Answer 4 · 2014-03-08T11:44:33+0000

Here you will find: 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 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 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">&lt;Previous</a>
       | 
       <a href="javascript:moveSlides('next');" id="next">Next&gt;</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;
}

Simple Javascript Slider

More articles: