How to build simple jQuery image slider with sliding or opacity effect?

Before inspecting examples, you should know two jQuery functions which i used most.

index() returns value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

eq() selects of an element based on its position (index value).

Basicly i take selected trigger element's index value and match this value on images with eq method.

- FadeIn / FadeOut effect.

- Sliding effect.

- alternate Mousewheel response.

​html sample:

<ul class="images">
   <li>
      <img src="images/1.jpg" alt="1" />
   </li>
   <li>
      <img src="images/2.jpg" alt="2" />
   </li>
   ...
</ul>

<ul class="triggers">
   <li>1</li>
   <li>2</li>
   ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

OPACITY EFFECT: jsFiddle.

css trick: overlapping images with position:absolute

ul.images { position:relative; }
  ul.images li { position:absolute; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

SLIDING EFFECT: jsFiddle.

css trick: with double wrapper and use child as mask

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
    ul.images { position:relative; top:0px;left:0px; }
    /* this width must be total of the images, it comes from jquery */
        ul.images li { float:left; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

Common jQuery response for both slider:

( triggers + next/prev click and timing )

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

Here is a simple and easy to understand code for Creating image slideshow using JavaScript without using Jquery.

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.gif"; 
path[1] = "image_2.gif"; 
path[2] = "image_3.gif"; 

function swapImage() { document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; setTimeout("swapImage()",3000); 
} window.onload=swapImage;

</script> 

<img height="200" name="slide" src="image_1.gif" width="400" />

I have recently created a solution with a gallery of images and a slider that apears when an image is clicked.

Take a look at the code here: GitHub Code

And a live example here: Code Example

var CreateGallery = function(parameters) {
	var self = this;
	this.galleryImages = [];
	this.galleryImagesSrcs = [];
	this.galleryImagesNum = 0;
	this.counter;
	this.galleryTitle = parameters.galleryTitle != undefined ? parameters.galleryTitle : 'Gallery image';
	this.maxMobileWidth = parameters.maxMobileWidth != undefined ? parameters.maxMobileWidth : 768;
	this.numMobileImg = parameters.numMobileImg != undefined ? parameters.numMobileImg : 2;
	this.maxTabletWidth = parameters.maxTabletWidth != undefined ? parameters.maxTabletWidth : 1024;
	this.numTabletImg = parameters.numTabletImg != undefined ? parameters.numTabletImg : 3;
	this.addModalGallery = function(gallerySelf = self){
		var $div = $(document.createElement('div')).attr({
			'id': 'modal-gallery'
		}).append($(document.createElement('div')).attr({
				'class': 'header'
			}).append($(document.createElement('button')).attr({
					'class': 'close-button',
					'type': 'button'
				}).html('&times;')
			).append($(document.createElement('h2')).text(gallerySelf.galleryTitle))
		).append($(document.createElement('div')).attr({
				'class': 'text-center'
			}).append($(document.createElement('img')).attr({
					'id': 'gallery-img'
				})
			).append($(document.createElement('button')).attr({
					'class': 'prev-button',
					'type': 'button'
				}).html('&#9668;')
			).append($(document.createElement('button')).attr({
					'class': 'next-button',
					'type': 'button'
				}).html('&#9658;')
			)
		);
		parameters.element.after($div);
	};
	$(document).on('click', 'button.prev-button', {self: self}, function() {
		var $currImg = self.counter >= 1 ? self.galleryImages[--self.counter] : self.galleryImages[self.counter];
		var $currHash = self.galleryImagesSrcs[self.counter];
		var $src = $currImg.src;
		window.location.hash = $currHash;
		$('img#gallery-img').attr('src', $src);
		$('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
	});
	$(document).on('click', 'button.next-button', {self: self}, function() {
		var $currImg = self.counter < (self.galleryImagesNum - 1) ? self.galleryImages[++self.counter] : self.galleryImages[self.counter];
		var $currHash = self.galleryImagesSrcs[self.counter];
		var $src = $currImg.src;
		window.location.hash = $currHash;
		$('img#gallery-img').attr('src', $src);
		$('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
	});
	$(document).on('click', 'div#modal-gallery button.close-button', function() {
		$('#modal-gallery').css('position', 'relative');
		$('#modal-gallery').hide();
		$('body').css('overflow', 'visible');
	});
	parameters.element.find('a').on('click', {self: self}, function(event) {
		event.preventDefault();
		$('#modal-gallery').css('position', 'fixed');
		$('#modal-gallery').show();
		$('body').css('overflow', 'hidden');
		var $currHash = this.hash.substr(1);
		self.counter = self.galleryImagesSrcs.indexOf($currHash); 
		var $src = $currHash;
		window.location.hash = $currHash;
		$('img#gallery-img').attr('src', $src);
		$('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
	});
	this.sizeGallery = function(gallerySelf = self) {
		var $modalGallery = $(document).find("div#modal-gallery");
		if($modalGallery.length <= 0) {
			this.addModalGallery();
		}
		var $windowWidth = $(window).width();
		var $parentWidth = parameters.element.width();
		var $thumbnailHref = parameters.element.find('img:first').attr('src');
		if($windowWidth < gallerySelf.maxMobileWidth) {
			var percentMobile = Math.floor(100 / gallerySelf.numMobileImg); 
			var emMobile = 0;
			var pxMobile = 2;
//                        var emMobile = gallerySelf.numMobileImg * 0.4;
//                        var pxMobile = gallerySelf.numMobileImg * 2;
			parameters.element.find('img').css('width', 'calc('+percentMobile+'% - '+emMobile+'em - '+pxMobile+'px)');
		} else if($windowWidth < gallerySelf.maxTabletWidth) {
			var percentTablet = Math.floor(100 / gallerySelf.numTabletImg); 
			var emTablet = 0;
			var pxTablet = 2;
//                        var emTablet = gallerySelf.numMobileImg * 0.4;
//                        var pxTablet = gallerySelf.numMobileImg * 2;
			parameters.element.find('img').css('width', 'calc('+percentTablet+'% - '+emTablet+'em - '+pxTablet+'px)');
		} else {
			var $thumbImg = new Image();
			$thumbImg.src = $thumbnailHref;
			$thumbImg.onload = function() {
				var $thumbnailWidth = this.width;
				if($parentWidth > 0 && $thumbnailWidth > 0) {
					parameters.element.find('img').css('width', (Math.ceil($thumbnailWidth * 100 / $parentWidth))+'%');
				}
			};
		}
	};
	this.startGallery = function(gallerySelf = self) {
		parameters.element.find('a').each(function(index, el) {
			var $currHash = el.hash.substr(1);
			var $img = new Image();
			$img.src = $currHash;
			gallerySelf.galleryImages.push($img);
			gallerySelf.galleryImagesSrcs.push($currHash);
		});
		this.galleryImagesNum = this.galleryImages.length;
	};
	this.sizeGallery();
	this.startGallery();
};
var myGallery;
$(window).on('load', function() {
	myGallery = new CreateGallery({
		element: $('#div-gallery'),
		maxMobileWidth: 768,
		numMobileImg: 2,
		maxTabletWidth: 1024,
		numTabletImg: 3
	});
});
$(window).on('resize', function() {
	myGallery.sizeGallery();
});
#div-gallery {
	text-align: center;
}
#div-gallery img {
	margin-right: auto;
	margin-left: auto;
}
div#modal-gallery {
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100vh;
	min-height: 100vh;
	margin-left: 0;
	border: 0;
	border-radius: 0;
	z-index: 1006;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: none;
	background-color: #fefefe;
	position: relative;
	margin-right: auto;
	overflow-y: auto;
	padding: 0;
}
div#modal-gallery div.header {
	position: relative; 
}
div#modal-gallery div.header h2 {
	margin-left: 1rem; 
}
div#modal-gallery div.header button.close-button {
	position: absolute;
	top: calc(50% - 1em);
	right: 1rem;
}
div#modal-gallery img {
	display: block;
	max-width: 98%;
	max-height: calc(100vh - 5em);
	margin-right: auto;
	margin-left: auto;
}
div#modal-gallery div.text-center {
	position: relative;
}
button.close-button {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}
button.close-button:hover, button.close-button:focus {
	background-color: #ddd;
}
button.next-button:hover, button.prev-button:hover, button.next-button:focus, button.prev-button:focus {
	color: #fff;
	text-decoration: none;
	filter: alpha(opacity=90);
	outline: 0;
	opacity: .9;
}
button.next-button, button.prev-button {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 15%;
	font-size: 20px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
	background-color: rgba(0,0,0,0);
	filter: alpha(opacity=50);
	opacity: .5;
	border: none;
}
button.next-button {
	right: 0;
	left: auto;
	background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
	background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
	background-repeat: repeat-x;
}
button.prev-button {
	background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
	background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
	background-repeat: repeat-x;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div-gallery">
	<a href="#http://placehold.it/1024x1024/ff0000/000000?text=Gallery+image+1"><img src="http://placehold.it/300x300/ff0000/000000?text=Gallery+image+1" alt=""></a>
	<a href="#http://placehold.it/1024x1024/ff4000/000000?text=Gallery+image+2"><img src="http://placehold.it/300x300/ff4000/000000?text=Gallery+image+2" alt=""></a>
	<a href="#http://placehold.it/1024x1024/ff8000/000000?text=Gallery+image+3"><img src="http://placehold.it/300x300/ff8000/000000?text=Gallery+image+3" alt=""></a>
	<a href="#http://placehold.it/1024x1024/ffbf00/000000?text=Gallery+image+4"><img src="http://placehold.it/300x300/ffbf00/000000?text=Gallery+image+4" alt=""></a>
	<a href="#http://placehold.it/1024x1024/ffff00/000000?text=Gallery+image+5"><img src="http://placehold.it/300x300/ffff00/000000?text=Gallery+image+5" alt=""></a>
	<a href="#http://placehold.it/1024x1024/bfff00/000000?text=Gallery+image+6"><img src="http://placehold.it/300x300/bfff00/000000?text=Gallery+image+6" alt=""></a>
	<a href="#http://placehold.it/1024x1024/80ff00/000000?text=Gallery+image+7"><img src="http://placehold.it/300x300/80ff00/000000?text=Gallery+image+7" alt=""></a>
	<a href="#http://placehold.it/1024x1024/40ff00/000000?text=Gallery+image+8"><img src="http://placehold.it/300x300/40ff00/000000?text=Gallery+image+8" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ff00/000000?text=Gallery+image+9"><img src="http://placehold.it/300x300/00ff00/000000?text=Gallery+image+9" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ff40/000000?text=Gallery+image+10"><img src="http://placehold.it/300x300/00ff40/000000?text=Gallery+image+10" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ff80/000000?text=Gallery+image+11"><img src="http://placehold.it/300x300/00ff80/000000?text=Gallery+image+11" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ffbf/000000?text=Gallery+image+12"><img src="http://placehold.it/300x300/00ffbf/000000?text=Gallery+image+12" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ffff/000000?text=Gallery+image+13"><img src="http://placehold.it/300x300/00ffff/000000?text=Gallery+image+13" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00bfff/000000?text=Gallery+image+14"><img src="http://placehold.it/300x300/00bfff/000000?text=Gallery+image+14" alt=""></a>
	<a href="#http://placehold.it/1024x1024/0080ff/000000?text=Gallery+image+15"><img src="http://placehold.it/300x300/0080ff/000000?text=Gallery+image+15" alt=""></a>
	<a href="#http://placehold.it/1024x1024/0040ff/000000?text=Gallery+image+16"><img src="http://placehold.it/300x300/0040ff/000000?text=Gallery+image+16" alt=""></a>
</div>

Tags:

Javascript

Css

Jquery

Animation

Slideshow

Recent Posts