ROTATING IMAGE SLIDER WITH JQUERY

Developer
Theun
Size
5,062 Kb
Views
42,504
  1. ROTATING IMAGE SLIDER WITH JQUERY Previews
  2. ROTATING IMAGE SLIDER WITH JQUERY HTML Codes
  3. ROTATING IMAGE SLIDER WITH JQUERY CSS Codes
  4. ROTATING IMAGE SLIDER WITH JQUERY JS Codes

How do I make an rotating image slider with jquery?

What is a rotating image slider with jquery? How do you make a rotating image slider with jquery? This script and codes were developed by Theun on 23 July 2022, Saturday.

ROTATING IMAGE SLIDER WITH JQUERY Previews
IQ Test

ROTATING IMAGE SLIDER WITH JQUERY - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ROTATING IMAGE SLIDER WITH JQUERY</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content"> <h1>Rotating Image Slider</h1><br>	<div class="rm_wrapper">	<div id="rm_container" class="rm_container">	<ul>	<li data-images="rm_container_1" data-rotation="-15"><img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/1.jpg"/></li>	<li data-images="rm_container_2" data-rotation="-5"><img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/2.jpg"/></li>	<li data-images="rm_container_3" data-rotation="5"><img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/3.jpg"/></li>	<li data-images="rm_container_4" data-rotation="15"><img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/4.jpg"/></li>	</ul>	<div id="rm_mask_left" class="rm_mask_left"></div>	<div id="rm_mask_right" class="rm_mask_right"></div>	<div id="rm_corner_left" class="rm_corner_left"></div>	<div id="rm_corner_right" class="rm_corner_right"></div>	<h2>Fashion Explosion 2013</h2>	<div style="display:none;">	<div id="rm_container_1">	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/1.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/5.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/6.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/7.jpg"/>	</div>	<div id="rm_container_2">	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/2.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/8.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/9.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/10.jpg"/>	</div>	<div id="rm_container_3">	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/3.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/11.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/12.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/13.jpg"/>	</div>	<div id="rm_container_4">	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/4.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/14.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/15.jpg"/>	<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/16.jpg"/>	</div>	</div>	</div>	<div class="rm_nav">	<a id="rm_next" href="#" class="rm_next"></a>	<a id="rm_prev" href="#" class="rm_prev"></a>	</div>	<div class="rm_controls">	<a id="rm_play" href="#" class="rm_play">Play</a>	<a id="rm_pause" href="#" class="rm_pause">Pause</a>	</div>	</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/RotatingImageSlider/js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/RotatingImageSlider/js/jquery.mousewheel.js"></script> <script src="js/index.js"></script>
</body>
</html>

ROTATING IMAGE SLIDER WITH JQUERY - Script Codes CSS Codes

@font-face { font-family: 'Electrolize'; font-style: normal; font-weight: 400; src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
body{	background:#f0f0f0;	color:#000;	font-family: 'Electrolize';	font-size:16px;
}
a{	color:#000;	text-decoration:none;
}
h1{ font-family: 'Electrolize';	padding:10px;	margin:20px;	font-size:40px;	text-transform:uppercase;	text-shadow:0px 0px 1px #fff;	color:#333;	background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/line.png) repeat-x bottom left;
}
.rm_wrapper{	width:1160px;	margin:0 auto;	position:relative;
}
.rm_container{	width:1050px;	overflow:hidden;	position:relative;	height:530px;	margin:0 auto;
}
.rm_container h2{	background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/lines.png) repeat top left;	padding:10px 30px;	position:absolute;	bottom:170px;	right:0px;	color:#000;	font-size:36px;	text-transform:uppercase;	text-shadow:1px 0px 1px #fff;
}
.rm_container ul{	width:1170px;
}
.rm_container ul li{	float:left;	margin-left:-80px;	position:relative;	overflow:hidden;	width:310px;	height:465px;	border:30px solid #f0f0f0;	border-width:50px 30px 0px 30px;	background-color:#f0f0f0;
}
.rm_container ul li img{	position:absolute;	top:0px;	left:0px;
}
.rm_mask_right, .rm_mask_left{	position: absolute;	height: 110px;	background: #f0f0f0;	width: 530px;	bottom: -30px;	left: 0px;	-moz-transform:rotate(-3deg);	-webkit-transform:rotate(-3deg);	transform:rotate(-3deg);
}
.rm_mask_right{	left:auto;	right:0px;	-moz-transform:rotate(3deg);	-webkit-transform:rotate(3deg);	transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{	background: #f0f0f0;	position:absolute;	width:200px;	height:100px;	bottom:0px;	left:-65px;	-moz-transform:rotate(45deg);	-webkit-transform:rotate(45deg);	transform:rotate(45deg);
}
.rm_corner_right{	left:auto;	right:-65px;	-moz-transform:rotate(-45deg);	-webkit-transform:rotate(-45deg);	transform:rotate(-45deg);
}
.rm_nav a{	position:absolute;	top:200px;	width:38px;	height:87px;	cursor:pointer;	opacity:0.7;
}
.rm_nav a:hover{	opacity:1.0;
}
.rm_nav a.rm_next{	background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/next.png) no-repeat top left;	right:0px;
}
.rm_nav a.rm_prev{	background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/prev.png) no-repeat top left;	left:0px;
}
.rm_controls{	position:absolute;	top:0px;	left:-40px;	height:20px;
}
.rm_controls a{	cursor:pointer;	opacity:0.7;	padding-left:24px;	font-size:16px;	text-transform:uppercase;	height:20px;	float:left;	line-height:20px;
}
.rm_controls a:hover{	opacity:1.0;
}
.rm_controls a.rm_play{	display:none;	background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{	background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/pause.png) no-repeat center left;
}
/* Footer Style */
.footer{	position:fixed;	bottom:0px;	left:0px;	width:100%;	font-size:13px;	background:#000;	opacity:0.9;	height:20px;	padding-bottom:5px;	text-transform:uppercase;	z-index:4;
}
.footer a{	padding:5px 10px;	letter-spacing:1px;	text-shadow:1px 1px 1px #000;	color:#ddd;	float:right;
}
.footer a:hover{	color:#fff;
}
.footer a span{	font-weight:bold;
}
.footer a.left{	float:left;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {	margin:0;	padding:0;
}

ROTATING IMAGE SLIDER WITH JQUERY - Script Codes JS Codes

$(function() {	//our 4 items	var $listItems	= $('#rm_container > ul > li'),	totalItems	= $listItems.length,	//the controls	$rm_next	= $('#rm_next'),	$rm_prev	= $('#rm_prev'),	$rm_play	= $('#rm_play'),	$rm_pause	= $('#rm_pause'),	//the masks and corners of the slider	$rm_mask_left	= $('#rm_mask_left'),	$rm_mask_right	= $('#rm_mask_right'),	$rm_corner_left	= $('#rm_corner_left'),	$rm_corner_right= $('#rm_corner_right'),	//check if the browser is <= IE8	ieLte8	= ($.browser.msie && parseInt($.browser.version) <= 8),	RotateImageMenu	= (function() {	//difference of animation time between the items	var	timeDiff	= 300,	//time between each image animation (slideshow)	slideshowTime	= 3000,	slideshowInterval,	//checks if the images are rotating	isRotating	= false,	//how many images completed each slideshow iteration	completed	= 0,	/*	all our images have 310 of width and 465 of height.	this could / should be dynamically calculated	if we would have different image sizes.	we will set the rotation origin at	x = width/2 and y = height*2	*/	origin	= ['155px', '930px'],	init	= function() {	configure();	initEventsHandler();	},	//initialize some events	initEventsHandler	= function() {	/*	next and previous arrows:	we will stop the slideshow if active,	and rotate each items images.	1	rotate right	-1	rotate left	*/	$rm_next.bind('click', function(e) {	stopSlideshow();	rotateImages(1);	return false;	});	$rm_prev.bind('click', function(e) {	stopSlideshow();	rotateImages(-1);	return false;	});	/*	start and stop the slideshow	*/	$rm_play.bind('click', function(e) {	startSlideshow();	return false;	});	$rm_pause.bind('click', function(e) {	stopSlideshow();	return false;	});	/*	adds events to the mouse and left / right keys	*/	$(document).bind('mousewheel', function(e, delta) {	if(delta > 0) {	stopSlideshow();	rotateImages(0);	}	else {	stopSlideshow();	rotateImages(1);	}	return false;	}).keydown(function(e){	switch(e.which){	case 37:	stopSlideshow();	rotateImages(0);	break;	case 39:	stopSlideshow();	rotateImages(1);	break;	}	});	},	/*	rotates each items images.	we set a delay between each item animation	*/	rotateImages	= function(dir) {	//if the animation is in progress return	if(isRotating) return false;	isRotating = true;	$listItems.each(function(i) {	var $item	= $(this),	/*	the delay calculation.	if rotation is to the right,	then the first item to rotate is the first one,	otherwise the last one	*/	interval	= (dir === 1) ? i * timeDiff : (totalItems - 1 - i) * timeDiff;	setTimeout(function() {	//the images associated to this item	var	$otherImages	= $('#' + $item.data('images')).children('img'),	totalOtherImages	= $otherImages.length;	//the current one	$img	= $item.children('img:last'),	//keep track of each items current image	current	= $item.data('current');	//out of bounds	if(current > totalOtherImages - 1)	current = 0;	else if(current < 0)	current = totalOtherImages - 1;	//the next image to show and its initial rotation (depends on dir)	var otherRotation	= (dir === 1) ? '-30deg' : '30deg',	$other	= $otherImages.eq(current).clone();	//for IE <= 8 we will not rotate, but fade out / fade in ...	//better than nothing :)	if(!ieLte8)	$other.css({	rotate	: otherRotation,	origin	: origin	});	(dir === 1) ? ++current : --current;	//prepend the next image to the <li>	$item.data('current', current).prepend($other);	//the final rotation for the current image	var rotateTo	= (dir === 1) ? '80deg' : '-80deg';	if(!ieLte8) {	$img.animate({	rotate	: rotateTo	}, 1200, function(){	$(this).remove();	++completed;	if(completed === 4) {	completed = 0;	isRotating = false;	}	});	$other.animate({	rotate	: '0deg'	}, 600);	}	else {	$img.fadeOut(1200, function(){	$(this).remove();	++completed;	if(completed === 4) {	completed = 0;	isRotating = false;	}	});	}	}, interval );	});	},	//set initial rotations	configure	= function() {	if($.browser.msie && !ieLte8)	rotateMaskCorners();	else if(ieLte8)	hideMaskCorners();	$listItems.each(function(i) {	//the initial current is 1	//since we already showing the first image	var $item = $(this).data('current', 1);	if(!ieLte8)	$item.transform({rotate: $item.data('rotation') + 'deg'}) .find('img') .transform({origin: origin});	});	},	//rotates the masks and corners	rotateMaskCorners	= function() {	$rm_mask_left.transform({rotate: '-3deg'});	$rm_mask_right.transform({rotate: '3deg'});	$rm_corner_left.transform({rotate: '45deg'});	$rm_corner_right.transform({rotate: '-45deg'});	},	//hides the masks and corners	hideMaskCorners	= function() {	$rm_mask_left.hide();	$rm_mask_right.hide();	$rm_corner_left.hide();	$rm_corner_right.hide();	},	startSlideshow	= function() {	clearInterval(slideshowInterval);	rotateImages(1);	slideshowInterval	= setInterval(function() {	rotateImages(1);	}, slideshowTime);	//show the pause button and hide the play button	$rm_play.hide();	$rm_pause.show();	},	stopSlideshow	= function() {	clearInterval(slideshowInterval);	//show the play button and hide the pause button	$rm_pause.hide();	$rm_play.show();	};	return {init : init};	})();	RotateImageMenu.init();
});
ROTATING IMAGE SLIDER WITH JQUERY - Script Codes
ROTATING IMAGE SLIDER WITH JQUERY - Script Codes
Home Page Home
Developer Theun
Username tjoen
Uploaded July 23, 2022
Rating 4.5
Size 5,062 Kb
Views 42,504
Do you need developer help for ROTATING IMAGE SLIDER WITH JQUERY?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Theun (tjoen) Script Codes
Name
A Pen by Theun
Love is in the air...
City block generator
Three.js shooter template
Touch Slider
Those kids...
D3 example
Canvas Buldings
Roulette
Generative art from rectangleworld
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!