ROTATING IMAGE SLIDER WITH JQUERY
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 - 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();
});
Developer | Theun |
Username | tjoen |
Uploaded | July 23, 2022 |
Rating | 4.5 |
Size | 5,062 Kb |
Views | 42,504 |
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!
Name | Size |
ROTATING IMAGE SLIDER WITH JQUERY | 5,062 Kb |
Catslicer | 2,957 Kb |
Responsive activity calendar | 3,850 Kb |
Touch Slider | 3,587 Kb |
Canvas Buldings | 2,737 Kb |
Roulette | 2,417 Kb |
Love is in the air... | 2,642 Kb |
Those kids... | 3,390 Kb |
Font Awesome Cheetsheet | 7,878 Kb |
Montyclock | 4,728 Kb |
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!
Name | Username | Size |
Font stack | Adrianjacob | 1,868 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!