Submit your widget

A html5 Responsive Full Width Scroller slider with jQuery and css3

Created about a year ago   Views 10425   downloads 1824    Author htmldrive
A html5 Responsive Full Width Scroller slider with jQuery and css3
View DemoDownload 1.0 MB
20
Share |

This is A Responsive Full Width Scroller slider

THE HTML

	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">	
<div class="htmleaf-container">
		<div class="htmleaf-content">
			<div class="slider one">
			  <header class="htmleaf-header">
					<h1> <span>A Responsive Full Width Scroller slider</span></h1>
		
				</header>
			</div>
			<div class="slider two">
			  <img src="img/atacertaintime.png">
			</div>
			<div class="slider three">
			  <img src="img/franziska.png">
			</div>
			<div class="slider four"></div>
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 32 32" id="previous" version="1.1" viewBox="0 0 32 32" xml:space="preserve">
			  <path d="M7.701,14.276l9.586-9.585c0.879-0.878,2.317-0.878,3.195,0l0.801,0.8c0.878,0.877,0.878,2.316,0,3.194  L13.968,16l7.315,7.315c0.878,0.878,0.878,2.317,0,3.194l-0.801,0.8c-0.878,0.879-2.316,0.879-3.195,0l-9.586-9.587  C7.229,17.252,7.02,16.62,7.054,16C7.02,15.38,7.229,14.748,7.701,14.276z" fill="#FFFFFF"/>
			</svg>

			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 32 32" id="next" version="1.1" viewBox="0 0 32 32" xml:space="preserve">
			  <path d="M24.291,14.276L14.705,4.69c-0.878-0.878-2.317-0.878-3.195,0l-0.8,0.8c-0.878,0.877-0.878,2.316,0,3.194  L18.024,16l-7.315,7.315c-0.878,0.878-0.878,2.317,0,3.194l0.8,0.8c0.878,0.879,2.317,0.879,3.195,0l9.586-9.587  c0.472-0.471,0.682-1.103,0.647-1.723C24.973,15.38,24.763,14.748,24.291,14.276z" fill="#FFFFFF"/>
			</svg>
		</div>
		
	</div>

THE JS

<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script type="text/javascript">
		var timer = 0;
		var elementCount = 0;
		var firstPos = 0;
		var lastPos = 0;

		$(function() {
		  initialiseSlider();
		  $("#next").click(function() {
		    slideRight();
		  });

		  $("#previous").click(function() {
		    slideLeft();
		  });
		});

		function initialiseSlider() {
		  $("div.slider").each(function(value) {
		    elementCount += 1;
		    var position = -100 * value;
		    $(this).css("left", position + "%");
		  });

		  if (elementCount === 1)
		    $("#next").hide();
		}

		function slideRight() {
		  $("div.slider").each(function(value) {
		    $(this).addClass("zoomout");
		    var position = parseInt($(this)[0].style.left) + 100;

		    if (value === 0)
		      firstPos = position;

		    $(this).css("left", position + "%");
		    timer = setTimeout(removeZoom, 1000);
		  });

		  console.log(firstPos);

		  if (firstPos !== ((elementCount - 1) * 100)) {
		    $("#next").show();
		    $("#previous").show();
		  } else
		    $("#next").hide();
		}

		function slideLeft() {
		  $("div.slider").each(function(value) {
		    $(this).addClass("zoomout");
		    var position = parseInt($(this)[0].style.left) - 100;

		    if (value === (elementCount - 1))
		      lastPos = position;

		    $(this).css("left", position + "%");
		    timer = setTimeout(removeZoom, 1000);
		  });

		  console.log(lastPos);

		  if (lastPos !== ((elementCount - 1) * -100)) {
		    $("#previous").show();
		    $("#next").show();
		  } else
		    $("#previous").hide();
		}

		function removeZoom() {
		  $("div.slider").each(function() {
		    $(this).removeClass("zoomout");
		  });
		}
	</script>

 

Tag: slideshow