alojzije/horizontal_slider_jQuery.png

## horizontal_slider_jQuery.png

      
    Raw
  

              horizontal_slider_jQuery.png
            
          
## index.html
 <html>
 <head>
 	<title>Horizontal slider demo</title>
 	<link rel="stylesheet" type="text/css" href="style.css">
 	<link rel="stylesheet" type="text/css" href="style_demonstration.css">
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 </head>
 <body>

 	<!-- spacers, only for demonstration purposes, to be removed -->
 	<div class="spacer_vertical"></div>
 	<div class="spacer_horizontal"></div>

 	<div class="arrow" id="arrow_left">&#65513;</div>
 	<!-- the slider clean-->
	 <div class="shower">
	    <div class="holder">
	      <div class="slide" id="slide-0"></div>
	      <div class="slide" id="slide-1"></div>
	      <div class="slide" id="slide-2"></div>
	    </div>
	</div>
	<!-- end of slider clean-->
	<div class="arrow" id="arrow_right"> &#65515; </div>

	<!-- spacers, only for demonstration purposes, to be removed -->
 	<div class="spacer_vertical"></div>
 	<div class="spacer_horizontal"></div>

 	<!-- the slider embelished for demonstration purposes-->
	 <div class="shower_demonstr">
	    <div class="holder_demonstr">
	      <div class="slide_demonstr" id="slide-0"></div>
	      <div class="slide_demonstr" id="slide-1"></div>
	      <div class="slide_demonstr" id="slide-2"></div>
	    </div>
	</div>

	<script src="slide.js"></script>
</body>
 </html>


## slide.js
var activeSlideNo = 0;    // keep track of the current slide nb
var lastSlideNo   = 0;    // number of slides

function slide_left(){
    if ($('.holder').is(':animated'))  return;	//do not animate it an animation is already in motion
    if ( activeSlideNo == 0 ) return;			      //do not animate backwards if at beginning

    activeSlideNo -= 1;							            //keep track of the current slide nb

    $('.holder').stop().animate(               //animate!
                {'margin-left': "+=" + $('.slide').width()}, 1000);

    $('.holder_demonstr').stop().animate(     //demonstration animation
                {'margin-left': "+=" + $('.slide').width()}, 1000);
}

function slide_right(){
    if ($('.holder').is(':animated'))   return;	    //do not animate it an animation is already in motion
    if ( activeSlideNo == lastSlideNo ) return;			//do not animate forward if at the end

    activeSlideNo += 1;							                //keep track of the current slide nb

    $('.holder').stop().animate(                    //animate!
                {'margin-left': "-=" + $('.slide').width()}, 1000);

    $('.holder_demonstr').stop().animate(           //demonstration animation
                {'margin-left': "-=" + $('.slide').width()}, 1000);
}


$(document).ready(function() {
  lastSlideNo = $('.holder').children().length - 1;

  $('#arrow_left').click(function(){
   		slide_left();
   	});

  $('#arrow_right').click(function(){
   		slide_right();
   });
});

//on resize, recalibrate margin to point to desired (current) slide
$(window).resize(function() {
    $('.holder').css({ marginLeft : -1 * activeSlideNo * $('.slide').width()});
    $('.holder_demonstr').css({ marginLeft : -1 * activeSlideNo * $('.slide').width() -3});
});

## style.css
.shower{
  float:  left;
  width:  10vw;    /* change HERE desired height and width */
  height: 10vw;    /* the rest will be scaled accordingly */
  overflow: hidden;
}

.holder {
  width:  300%;   /* change width HERE: width = 100% * nb_of_slides */
  height: 100%;
}

.slide {
  float:   left;
  width: 33.33%;
  height:  100%;
  opacity:  0.4;
}

.arrow{
  float:  left;
  font-size: 90px;
}

#arrow_left{  margin-left: -50px;   }

#slide-0{  background-color: purple; }
#slide-1{  background-color: teal;   }
#slide-2{  background-color: red;    }

## style_demonstration.css
.shower_demonstr{
  float:  left;
  width:  10vw;
  height: 10vw;
  border: 4px solid black;
}

.holder_demonstr {
  width:  300%;
  height: 100%;
  margin: -3px;

  border: 3px dashed silver;
}

.slide_demonstr {
  float:   left;
  width: 33.33%;
  height:  100%;
  opacity:  0.4;
}

.spacer_horizontal{
  float:  left;
  height: 10vw;
  width:  40vw;
}

.spacer_vertical{
  float:  left;
  height: 15vh;
  width:  99vw;

}

body{ background-color: gray; }
	<html>
	<head>
	<title>Horizontal slider demo</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="style_demonstration.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	</head>
	<body>

	<!-- spacers, only for demonstration purposes, to be removed -->
	<div class="spacer_vertical"></div>
	<div class="spacer_horizontal"></div>

	<div class="arrow" id="arrow_left">￩</div>
	<!-- the slider clean-->
	<div class="shower">
	<div class="holder">
	<div class="slide" id="slide-0"></div>
	<div class="slide" id="slide-1"></div>
	<div class="slide" id="slide-2"></div>
	</div>
	</div>
	<!-- end of slider clean-->
	<div class="arrow" id="arrow_right"> ￫ </div>

	<!-- spacers, only for demonstration purposes, to be removed -->
	<div class="spacer_vertical"></div>
	<div class="spacer_horizontal"></div>

	<!-- the slider embelished for demonstration purposes-->
	<div class="shower_demonstr">
	<div class="holder_demonstr">
	<div class="slide_demonstr" id="slide-0"></div>
	<div class="slide_demonstr" id="slide-1"></div>
	<div class="slide_demonstr" id="slide-2"></div>
	</div>
	</div>

	<script src="slide.js"></script>
	</body>
	</html>
	var activeSlideNo = 0; // keep track of the current slide nb
	var lastSlideNo = 0; // number of slides

	function slide_left(){
	if ($('.holder').is(':animated')) return; //do not animate it an animation is already in motion
	if ( activeSlideNo == 0 ) return; //do not animate backwards if at beginning

	activeSlideNo -= 1; //keep track of the current slide nb

	$('.holder').stop().animate( //animate!
	{'margin-left': "+=" + $('.slide').width()}, 1000);

	$('.holder_demonstr').stop().animate( //demonstration animation
	{'margin-left': "+=" + $('.slide').width()}, 1000);
	}

	function slide_right(){
	if ($('.holder').is(':animated')) return; //do not animate it an animation is already in motion
	if ( activeSlideNo == lastSlideNo ) return; //do not animate forward if at the end

	activeSlideNo += 1; //keep track of the current slide nb

	$('.holder').stop().animate( //animate!
	{'margin-left': "-=" + $('.slide').width()}, 1000);

	$('.holder_demonstr').stop().animate( //demonstration animation
	{'margin-left': "-=" + $('.slide').width()}, 1000);
	}


	$(document).ready(function() {
	lastSlideNo = $('.holder').children().length - 1;

	$('#arrow_left').click(function(){
	slide_left();
	});

	$('#arrow_right').click(function(){
	slide_right();
	});
	});

	//on resize, recalibrate margin to point to desired (current) slide
	$(window).resize(function() {
	$('.holder').css({ marginLeft : -1 * activeSlideNo * $('.slide').width()});
	$('.holder_demonstr').css({ marginLeft : -1 * activeSlideNo * $('.slide').width() -3});
	});
	.shower{
	float: left;
	width: 10vw; /* change HERE desired height and width */
	height: 10vw; /* the rest will be scaled accordingly */
	overflow: hidden;
	}

	.holder {
	width: 300%; /* change width HERE: width = 100% * nb_of_slides */
	height: 100%;
	}

	.slide {
	float: left;
	width: 33.33%;
	height: 100%;
	opacity: 0.4;
	}

	.arrow{
	float: left;
	font-size: 90px;
	}

	#arrow_left{ margin-left: -50px; }

	#slide-0{ background-color: purple; }
	#slide-1{ background-color: teal; }
	#slide-2{ background-color: red; }
	.shower_demonstr{
	float: left;
	width: 10vw;
	height: 10vw;
	border: 4px solid black;
	}

	.holder_demonstr {
	width: 300%;
	height: 100%;
	margin: -3px;

	border: 3px dashed silver;
	}

	.slide_demonstr {
	float: left;
	width: 33.33%;
	height: 100%;
	opacity: 0.4;
	}

	.spacer_horizontal{
	float: left;
	height: 10vw;
	width: 40vw;
	}

	.spacer_vertical{
	float: left;
	height: 15vh;
	width: 99vw;

	}

	body{ background-color: gray; }