{"id":3431,"date":"2017-04-12T07:46:17","date_gmt":"2017-04-12T11:46:17","guid":{"rendered":"https:\/\/www.searchenginegenie.com\/web-design-blog\/?p=3431"},"modified":"2017-04-12T07:46:17","modified_gmt":"2017-04-12T11:46:17","slug":"how-to-code-a-rotating-image-slideshow-wcss3-and-jquery","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/how-to-code-a-rotating-image-slideshow-wcss3-and-jquery\/","title":{"rendered":"How to code a Rotating image slideshow w\/css3 and jquery"},"content":{"rendered":"

Step:1<\/strong><\/h3>\n

First we are going to lay down the Html markup of the slideshow. #slideShowContainer<\/em> div is the main container element which holds the #slideShow<\/em> div.<\/p>\n

 <\/p>\n

<!DOCTYPE html><\/span><\/p>\n

<html><\/span><\/p>\n

<head><\/span><\/p>\n

<meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8\u2033 \/><\/span><\/p>\n

<title>Rotating Slideshow With jQuery and CSS3 | Tutorialzine Demo<\/title><\/span><\/p>\n

<link rel=”stylesheet” type=”text\/css” href=”css\/styles.css” \/><\/span><\/p>\n

<\/head><\/span><\/p>\n

<body><\/span><\/p>\n

<div id=”slideShowContainer”><\/span><\/p>\n

<div id=”slideShow”><\/span><\/p>\n

<ul><\/span><\/p>\n

<li><img src=”img\/photos\/1.jpg” width=”100%” alt=”Fish” \/><\/li><\/span><\/p>\n

<li><img src=”img\/photos\/2.jpg” width=”100%” alt=”Ancient” \/><\/li><\/span><\/p>\n

<li><img src=”img\/photos\/3.jpg” width=”100%” alt=”Industry” \/><\/li><\/span><\/p>\n

<li><img src=”img\/photos\/4.jpg” width=”100%” alt=”Rain” \/><\/li><\/span><\/p>\n

<\/ul><\/span><\/p>\n

<\/div><\/span><\/p>\n

<a id=”previousLink” href=”#”>\u00bb<\/a><\/span><\/p>\n

<a id=”nextLink” href=”#”>\u00ab<\/a><\/span><\/p>\n

<\/div><\/span><\/p>\n

<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.4\/jquery.min.js<\/a>“><\/script><\/span><\/p>\n

<script src=”js\/jquery.rotate.js”><\/script><\/span><\/p>\n

<script src=”js\/script.js”><\/script><\/span><\/p>\n

<\/body><\/span><\/p>\n

<\/html><\/span><\/p>\n

 <\/p>\n

We included the jQuery library, our own script script.js file and the jquery rotate plugin.<\/p>\n

 <\/p>\n

Step:2<\/h3>\n

We can see the styling of the slideshow below:<\/p>\n

 <\/p>\n

\"rotate\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-3432\"\r\n <\/div><\/a>
Rotating Slideshow<\/figcaption><\/figure>\n

 <\/p>\n

Step:3<\/h3>\n

Now iam using the jQuery rotate Plugin as it integrates with the animate( ) and css () methods of the library. we are using using jQuery\u2019s.<\/em><\/strong>$.Support<\/em> object to test whether the visitor\u2019s browser supports CSS3 transformations.<\/p>\n

 <\/p>\n

Script.js-part1<\/strong><\/span><\/p>\n

#slideShowContainer{<\/span>
\n width:510px;<\/span>
\n height:510px;<\/span>
\n position:relative;<\/span>
\n margin:120px auto 50px;<\/span>
\n }<\/span><\/p>\n

#slideShow{<\/span>
\n position:absolute;<\/span>
\n height:490px;<\/span>
\n width:490px;<\/span>
\n background-color:#fff;<\/span>
\n margin:10px 0 0 10px;<\/span>
\n z-index:100;<\/span><\/p>\n

-moz-box-shadow:0 0 10px #111;<\/span>
\n -webkit-box-shadow:0 0 10px #111;<\/span>
\n box-shadow:0 0 10px #111;<\/span>
\n }<\/span><\/p>\n

#slideShow ul{<\/span>
\n position:absolute;<\/span>
\n top:15px;<\/span>
\n right:15px;<\/span>
\n bottom:15px;<\/span>
\n left:15px;<\/span>
\n list-style:none;<\/span>
\n overflow:hidden;<\/span>
\n }<\/span><\/p>\n

#slideShow li{<\/span>
\n position:absolute;<\/span>
\n top:0;<\/span>
\n left:0;<\/span>
\n width:100%;<\/span>
\n height:100%;<\/span>
\n }<\/span><\/p>\n

#slideShowContainer > a{<\/span>
\n border:none;<\/span>
\n text-decoration:none;<\/span>
\n text-indent:-99999px;<\/span>
\n overflow:hidden;<\/span>
\n width:36px;<\/span>
\n height:37px;<\/span>
\n background:url(‘..\/img\/arrows.png’) no-repeat;<\/span>
\n position:absolute;<\/span>
\n top:50%;<\/span>
\n margin-top:-21px;<\/span>
\n }<\/span><\/p>\n

#previousLink{<\/span>
\n left:-38px;<\/span>
\n }<\/span><\/p>\n

#previousLink:hover{<\/span>
\n background-position:bottom left;<\/span>
\n }<\/span><\/p>\n

a#nextLink{<\/span>
\n right:-38px;<\/span>
\n background-position:top right;<\/span>
\n }<\/span><\/p>\n

#nextLink:hover{<\/span>
\n background-position:bottom right;<\/span>
\n }<\/span><\/p>\n

 <\/p>\n

Step:4<\/h3>\n

In second part, the fragment that is executed only in browsers that do not\u00a0 support css3 transformations.The most important is update z-index( ),as otherwise the slides would be displayed in reverse order.<\/p>\n

 <\/p>\n

Script.js-part2<\/strong><\/span><\/p>\n

$(document).ready(function(){<\/span><\/p>\n

var slideShow = $(‘#slideShow’),<\/span>
\n ul = slideShow.find(‘ul’),<\/span>
\n li = ul.find(‘li’),<\/span>
\n cnt = li.length;<\/span><\/p>\n

\/\/ As the images are positioned absolutely, the last image will be shown on top.<\/span>
\n \/\/ This is why we force them in the correct order by assigning z-indexes:<\/span><\/p>\n

updateZindex();<\/span><\/p>\n

if($.support.transform){<\/span><\/p>\n

\/\/ Modern browsers with support for css3 transformations<\/span><\/p>\n

li.find(‘img’).css(‘rotate’,function(i){<\/span>
\n \/\/ Rotating the images counter-clockwise<\/span>
\n return (-90*i) + ‘deg’;<\/span>
\n });<\/span><\/p>\n

\/\/ Binding a custom event. the direction and degrees parameters<\/span>
\n \/\/ are passed when the event is triggered later on in the code.<\/span><\/p>\n

slideShow.bind(‘rotateContainer’,function(e,direction,degrees){<\/span><\/p>\n

\/\/ Zooming in the slideshow:<\/span><\/p>\n

slideShow.animate({<\/span>
\n width\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0: 510,<\/span>
\n height\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0: 510,<\/span>
\n marginTop\u00a0\u00a0 \u00a0: 0,<\/span>
\n marginLeft\u00a0\u00a0 \u00a0: 0<\/span>
\n },’fast’,function(){<\/span><\/p>\n

if(direction == ‘next’){<\/span><\/p>\n

\/\/ Moving the topmost image containing Li at<\/span>
\n \/\/ the bottom after a fadeOut animation<\/span><\/p>\n

$(‘li:first’).fadeOut(‘slow’,function(){<\/span>
\n $(this).remove().appendTo(ul).show();<\/span>
\n updateZindex();<\/span>
\n });<\/span>
\n }<\/span>
\n else {<\/span><\/p>\n

\/\/ Showing the bottommost Li element on top<\/span>
\n \/\/ with a fade in animation. Notice that we are<\/span>
\n \/\/ updating the z-indexes.<\/span><\/p>\n

var liLast = $(‘li:last’).hide().remove().prependTo(ul);<\/span>
\n updateZindex();<\/span>
\n liLast.fadeIn(‘slow’);<\/span>
\n }<\/span><\/p>\n

\/\/ Rotating the slideShow. css(‘rotate’) gives us the<\/span>
\n \/\/ current rotation in radians. We are converting it to<\/span>
\n \/\/ degrees so we can add +90 or -90.<\/span><\/p>\n

slideShow.animate({<\/span>
\n rotate:Math.round($.rotate.radToDeg(slideShow.css(‘rotate’))+degrees) + ‘deg’<\/span>
\n },’slow’).animate({<\/span>
\n width\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0: 490,<\/span>
\n height\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0: 490,<\/span>
\n marginTop\u00a0\u00a0 \u00a0: 10,<\/span>
\n marginLeft\u00a0\u00a0 \u00a0: 10<\/span>
\n },’fast’);<\/span>
\n });<\/span>
\n });<\/span><\/p>\n

\/\/ By triggering the custom events below, we can<\/span>
\n \/\/ show the previous \/ next images in the slideshow.<\/span><\/p>\n

slideShow.bind(‘showNext’,function(){<\/span>
\n slideShow.trigger(‘rotateContainer’,[‘next’,90]);<\/span>
\n });<\/span><\/p>\n

slideShow.bind(‘showPrevious’,function(){<\/span>
\n slideShow.trigger(‘rotateContainer’,[‘previous’,-90]);<\/span>
\n });<\/span>
\n }<\/span><\/p>\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Step:1 First we are going to lay down the Html markup of the slideshow. #slideShowContainer div is the main container element which holds the #slideShow div.   <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8\u2033 \/> <title>Rotating Slideshow With jQuery and CSS3 | Tutorialzine Demo<\/title> <link rel=”stylesheet” type=”text\/css” href=”css\/styles.css” \/> <\/head> <body> <div id=”slideShowContainer”> <div […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3431","post","type-post","status-publish","format-standard","hentry","category-whats-trending-web-design"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=3431"}],"version-history":[{"count":74,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3431\/revisions"}],"predecessor-version":[{"id":3506,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3431\/revisions\/3506"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=3431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=3431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=3431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}