JS

How to Create Image Gallery Slider Using jQuery

In this article we will see How to Create Image Gallery Slider Using jQuery ?In this blog we will see Create Basic Image Gallery Slider using jQuery. Image Slide every two seconds and move mouse over image slider stop and leave mouse automatic image will slide.

Step 1:Before How to Create Image Gallery Slider Using jQuery first add jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Step 2:Add This CSS for Create Image Gallery Slider Using jQuery.

<style>
	#slider {
		width: 720px;
		height: 400px;
		overflow: hidden;
	}

		#slider .slides {
			display: block;
			width: 6000px;
			height: 400px;
			margin: 0;
			padding: 0;
		}

		#slider .slide {
			float: left;
			list-style-type: none;
			width: 720px;
			height: 400px;
		}
</style>

Step 3:Write this jQuery code for Create Image Gallery Slider Using jQuery.

<script>

		$(function () {

			//settings for slider
			var width = 720;
			var animationSpeed = 2000;
			var pause = 3000;
			var currentSlide = 1;

			
			var $slider = $('#slider');
			var $slideContainer = $('.slides', $slider);
			var $slides = $('.slide', $slider);

			var interval;

			function startSlider() {
				interval = setInterval(function () {
					$slideContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
						if (++currentSlide === $slides.length) {
							currentSlide = 1;
							$slideContainer.css('margin-left', 0);
						}
					});
				}, pause);
			}
			function pauseSlider() {
				clearInterval(interval);
			}

			$slideContainer
				.on('mouseenter', pauseSlider)
				.on('mouseleave', startSlider);

			startSlider();
			

		});

	</script>

Complete code for Create Image Gallery Slider Using jQuery with HTML.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>

		$(function () {

			//settings for slider
			var width = 720;
			var animationSpeed = 2000;
			var pause = 3000;
			var currentSlide = 1;

			
			var $slider = $('#slider');
			var $slideContainer = $('.slides', $slider);
			var $slides = $('.slide', $slider);

			var interval;

			function startSlider() {
				interval = setInterval(function () {
					$slideContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
						if (++currentSlide === $slides.length) {
							currentSlide = 1;
							$slideContainer.css('margin-left', 0);
						}
					});
				}, pause);
			}
			function pauseSlider() {
				clearInterval(interval);
			}

			$slideContainer
				.on('mouseenter', pauseSlider)
				.on('mouseleave', startSlider);

			startSlider();
			

		});

	</script>
<style>
	#slider {
		width: 720px;
		height: 400px;
		overflow: hidden;
	}

		#slider .slides {
			display: block;
			width: 6000px;
			height: 400px;
			margin: 0;
			padding: 0;
		}

		#slider .slide {
			float: left;
			list-style-type: none;
			width: 720px;
			height: 400px;
		}

	

	
</style>
</head>
<body>
	<div>
		<div>
			<h1>jQuery Basic Image Slider</h1>
		</div>

		<div id="slider">

			<ul class="slides">
				<li class="slide"><img src="download.jpg" style="width:100%;height:60%"></li>
				<li class="slide"><img src="download 1.jpg" style="width:100%;height:60%"></li>
				<li class="slide"><img src="download 2.jpg" style="width:100%;height:60%"></li>
				<li class="slide"><img src="download 3.jpg" style="width:100%;height:60%"></li>
				<li class="slide"><img src="download 4.jpg" style="width:100%;height:60%"></li>


			</ul>
			

		</div>

	</div>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *