shadeed9 shadeed9 - 1 year ago 253
CSS Question

Pure Javascript Slider

I'm new to Javascript and I want to make simple slider using JS only (No jQuery or other plugins).

enter image description here

As you see, I've one red box appear, under this there are 2 more boxs (green and blue). What I want is to navigate between them using next and prev buttons. The code should be dynamic so If I added more box it should work without any update to the code.

Please check this fiddle.

<div class="content">
<div class="boxes">
<div class="box-item red"></div>
<div class="box-item blue"></div>
<div class="box-item green"></div>

<a href="#" class="next">next</a>
<a href="#" class="prev">prev</a>

What I'm thinking about is:
1- Count the number of elements that have the class name "box-item".
2- Select the element and edit it's CSS "transform" translate(x,y)".
3- Then the next element will be shown.

var numItems = document.querySelectorAll('.box-item').length;

The above JS code count the number of elements, I want something to help me control the boxs by next prev buttons. Any ideas to do that?


Answer Source

I would use an object oriented approach for this problem. You can create a slider object with the relevant functions and attributes...

HTML elements has attributes(eg: class, id, value, style..). For this I used a custom attribute called translateVal for the elements that represent boxes. That attribute keeps a track of the current x value of css translate() of the element.

Slider = {
	current : 0,
	boxes : document.getElementsByClassName("box-item"),
	boxWidth: 0,
	init : function(boxWidth){
		Slider.boxWidth = boxWidth;
		Slider.boxes[0].style.transform = "translate(0px, 0)";
		Slider.boxes[0].translateVal = 0;
		for (var i=1; i<Slider.boxes.length; i++) {
			Slider.boxes[i].style.transform = "translate("+(boxWidth)+"px, 0)";
			Slider.boxes[i].translateVal = boxWidth;
	move : function(direction){
		if (direction == "left" && Slider.current > 0){
		} else if (direction == "right" && Slider.current < Slider.boxes.length-1){
		for (var i=0; i<Slider.boxes.length; i++) {
			var translateVal = Slider.boxWidth;
			if (i == Slider.current){
				translateVal = 0;
			Slider.boxes[i].style.transform = "translate("+(translateVal)+"px, 0)";
			Slider.boxes[i].translateVal = translateVal;
window.onload = function(){Slider.init(350)};
.content {
  width: 700px;
  height: 500px;
  margin: 120px auto 0 auto;
.content .boxes {
  width: 350px;
  height: 150px;
  background: #666666;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
.content .boxes .box-item {
  position: absolute;
  width: 350px;
  height: 150px;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
.content .boxes .red {
  background: red;
.content .boxes .blue {
  background: blue;
.content .boxes .green {
  background: green;
.content .next {
  float: right;
.content .prev {
  float: left;
<div class="content">
	<div class="boxes">
		<div class="box-item red" translateVal=""></div>
		<div class="box-item blue" translateVal=""></div>
		<div class="box-item green" translateVal=""></div>
	<a href="#" class="next" onclick="Slider.move('right')">next</a>
	<a href="#" class="prev" onclick="Slider.move('left')">prev</a>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download