Done that, we can start adding html and css towards creating the slideshow.<\/p>\n
2. Creating the Slideshow <\/h2>\n
In this section we are going to set up dhe html and css for the slideshow.<\/p>\n
2.1 HTML Setup <\/h3>\n
The html structure is going to be like this:<\/p>\n
1. A div will wrap the whole slideshow, lets give this div a class of 2. A 3. An 4. A So the structure of our slideshow would be:<\/p>\n Now lets populate that with more slides:<\/p>\n For now, you can only see this in the browser: An important part of creating the slideshow is CSS, which gives it a dynamic look. Lets start with the basics:<\/p>\n Below I have set up some styling for the main elements, look at the code below:<\/p>\n Now we got the nice view of the caption over the image that comes with a smooth fade: Well, it might seem such a long code, but it is just the css3 xfade attribute value and compatibility for all browsers.<\/p>\n You don’t see any changes after this code? It is obvious, because we animated images, but did not tell them when to do so and for how long one image should be on screen. Here is where CSS3 keyframes make a huge difference.<\/p>\n You declare a keyframe using The percentages you see above represent the animation duration. You can have as many as you like.<\/p>\n To make keyframes cross-browser compatible note the following: Looks like we’re done, now we have an eight image slideshow preprogrammed to show slides on certain timeframes.<\/p>\n The slideshow won’t look like below, this is just the images\/slides that show (more than 3): That was it, now you have to try it in your browser to see the real result.<\/p>\n Well, javascript makes it ultimate with slideshows. There are a lot of beautifully designed slideshows on the internet and one page I would suggest is http:\/\/kenwheeler.github.io\/slick\/<\/a>.<\/p>\ncss-slideshow<\/code>.<\/p>\nfigure<\/code> tag will wrap one image of the slideshow, it will contain an img<\/code> tag and a figcaption<\/code> tag inside.<\/p>\nimg<\/code> tag will specify the image for each slide, it will also have a defined width and height.<\/p>\nfigcaption<\/code> tag will contain caption for the image being displayed.<\/p>\n\r\n<div class=\"css-slideshow\">\r\n<figure>\r\n\t<img src=\"image.jpg\" width=\"495\" height=\"370\" \/>\r\n\t<figcaption>Caption here<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n<\/pre>\n
\r\n<!-- HTML SECTION -->\r\n<div class=\"css-slideshow\">\r\n<figure>\r\n\t<img src=\"images\/img1.jpg\" width=\"495\" height=\"370\" \/>\r\n\t<figcaption><strong>CSS3:<\/strong>Yourr first caption goes here <\/figcaption> \r\n<\/figure>\r\n<figure>\r\n\t<img src=\"images\/img2.jpg\" width=\"495\" height=\"370\" \/>\r\n\t<figcaption><strong>Slideshow:<\/strong> Your second caption goes here<\/figcaption> \r\n<\/figure>\r\n<figure>\r\n\t<img src=\"images\/img3.jpg\" width=\"495\" height=\"370\" \/>\r\n\t<figcaption><strong>Offline:<\/strong> Your third caption goes here<\/figcaption> \r\n<\/figure>\r\n<figure>\r\n\t<img src=\"images\/img4.jpg\" width=\"495\" height=\"370\" \/>\r\n\t<figcaption><strong>Cloud:<\/strong> Your fourth caption goes here<\/figcaption> \r\n<\/figure>\r\n<figure>\r\n\t<img src=\"images\/img5.jpg\" width=\"495\" height=\"370\" \/>\r\n\t<figcaption><strong>Server:<\/strong> Your fifth caption goes here<\/figcaption> \r\n<\/figure>\r\n<figure>\r\n\t<img src=\"images\/img6.jpg\" width=\"495\" height=\"370\" \/>\r\n\t<figcaption><strong>Shopping:<\/strong>Your sixth caption goes here<\/figcaption> \r\n<\/figure>\r\n<figure>\r\n\t<img src=\"images\/img7.jpg\" width=\"495\" height=\"370\" \/>\r\n\t<figcaption><strong>Smartphone:<\/strong> Your seventh caption goes here<\/figcaption> \r\n<\/figure>\r\n<figure>\r\n\t<img src=\"images\/img8.jpg\" width=\"495\" height=\"370\" \/>\r\n\t<figcaption><strong>Last Caption:<\/strong>Your last caption goes here<\/figcaption> \r\n<\/figure>\r\n\r\n<\/div> \r\n<\/pre>\n
\n![\"HTML](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/slideshow1.jpg\")
<\/a>2.2 CSS3 Styling <\/h3>\n
\r\n.css-slideshow {\r\n position: relative;\t\t\t\/* positioning facilities *\/\r\n max-width: 495px;\t\t\t\/* maximum width of the image *\/\r\n height: 370px;\r\n margin: 1em auto .5em auto;\t\t\t\t\/* some margin *\/\r\n font-family: \"Montserrat\", sans-serif;\t\/* just a custom font *\/\r\n font-weight: 300;\t\t\t\t\t\t\/* font-weight, semibold *\/\r\n}\r\n\r\n.css-slideshow figure {\r\n margin: 0;\t\t\t\t\t\/* ensuring there is no margin *\/\r\n max-width: 495px;\r\n height: 370px;\r\n background: #fff;\t\t\t \/* white background *\/\r\n position: absolute;\t\t\t\/* positioning facilities *\/\r\n}\r\n\r\n.css-slideshow img {\t\t\t\t\/* a shadow for our box wrapper *\/\r\n -webkit-box-shadow: 0 0 2px #666;\r\n box-shadow: 0 0 2px #666;\r\n}\r\n\r\n\/* Give the figcaption a 0% opacity at first *\/\r\n.css-slideshow figcaption {\r\n position: absolute;\r\n\ttop: 5px;\r\n\tcolor: #fff;\r\n\tbackground: rgba(0,0,0, .3);\r\n\tfont-size: .8em;\r\n\tpadding: 8px 12px;\r\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\r\n\tfilter: alpha(opacity=0);\r\n\topacity: 0;\r\n\t-webkit-transition: opacity .5s;\r\n\t-moz-transition: opacity .5s;\r\n\t-o-transition: opacity .5s;\r\n\t-ms-transition: opacity .5s;\r\n\ttransition: opacity .5s;\t\/* transition duration *\/\r\n}\r\n\r\n\/* Give the figcaption a 100% opacity now *\/\r\n.css-slideshow:hover figure figcaption {\r\n -webkit-transition: opacity .5s;\r\n\t-moz-transition: opacity .5s;\r\n\t-o-transition: opacity .5s;\r\n\t-ms-transition: opacity .5s;\r\n\ttransition: opacity .5s;\t\t\/* transition duration *\/\r\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\r\n\tfilter: alpha(opacity=100);\r\n\topacity: 1;\r\n}\r\n<\/pre>\n
\n<\/a>
\nTime to animate the images when it comes to changing from one image to another. We do that using the nth-child<\/code> selector which will give every element of the parent div specified some specific attributes. Look at the code below:<\/p>\n\r\n\/* Here every child of css-transition gets animated *\/\r\n\r\n.css-slideshow figure:nth-child(1) {\r\n\t-webkit-animation: xfade 48s 42s infinite;\r\n\t-moz-animation: xfade 48s 42s infinite;\r\n\t-ms-animation: xfade 48s 42s infinite;\r\n\t-o-animation: xfade 48s 42s infinite;\r\n\tanimation: xfade 48s 42s infinite;\r\n}\r\n.css-slideshow figure:nth-child(2) {\r\n\t-webkit-animation: xfade 48s 36s infinite;\r\n\t-moz-animation: xfade 48s 36s infinite;\r\n\t-ms-animation: xfade 48s 36s infinite;\r\n\t-o-animation: xfade 48s 36s infinite;\r\n\tanimation: xfade 48s 36s infinite;\r\n}\r\n.css-slideshow figure:nth-child(3) {\r\n\t-webkit-animation: xfade 48s 30s infinite;\r\n\t-moz-animation: xfade 48s 30s infinite;\r\n\t-ms-animation: xfade 48s 30s infinite;\r\n\t-o-animation: xfade 48s 30s infinite;\r\n\tanimation: xfade 48s 30s infinite;\r\n}\r\n.css-slideshow figure:nth-child(4) {\r\n\t-webkit-animation: xfade 48s 24s infinite;\r\n\t-moz-animation: xfade 48s 24s infinite;\r\n\t-ms-animation: xfade 48s 24s infinite;\r\n\t-o-animation: xfade 48s 24s infinite;\r\n\tanimation: xfade 48s 24s infinite;\r\n}\r\n.css-slideshow figure:nth-child(5) {\r\n\t-webkit-animation: xfade 48s 18s infinite;\r\n\t-moz-animation: xfade 48s 18s infinite;\r\n\t-ms-animation: xfade 48s 18s infinite;\r\n\t-o-animation: xfade 48s 18s infinite;\r\n\tanimation: xfade 48s 18s infinite;\r\n}\r\n.css-slideshow figure:nth-child(6) {\r\n\t-webkit-animation: xfade 48s 12s infinite;\r\n\t-moz-animation: xfade 48s 12s infinite;\r\n\t-ms-animation: xfade 48s 12s infinite;\r\n\t-o-animation: xfade 48s 12s infinite;\r\n\tanimation: xfade 48s 12s infinite;\r\n}\r\n.css-slideshow figure:nth-child(7) {\r\n\t-webkit-animation: xfade 48s 6s infinite;\r\n\t-moz-animation: xfade 48s 6s infinite;\r\n\t-ms-animation: xfade 48s 6s infinite;\r\n\t-o-animation: xfade 48s 6s infinite;\r\n\tanimation: xfade 48s 6s infinite;\r\n}\r\n.css-slideshow figure:nth-child(8) {\r\n\t-webkit-animation: xfade 48s 0s infinite;\r\n\t-moz-animation: xfade 48s 0s infinite;\r\n\t-ms-animation: xfade 48s 0s infinite;\r\n\t-o-animation: xfade 48s 0s infinite;\r\n\tanimation: xfade 48s 0s infinite;\r\n}\r\n<\/pre>\n@keyframe<\/code> and then enter the attribute value you want keyframes on like \"xfade\"<\/code>.<\/p>\n\r\n@keyframes \"xfade\" {\r\n 0% {\r\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\r\n \tfilter: alpha(opacity=100);\r\n \topacity: 1;\r\n }\r\n14.67% {\r\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\r\n\tfilter: alpha(opacity=100);\r\n\topacity: 1;\r\n}\r\n16.67% {\r\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\r\n\tfilter: alpha(opacity=0);\r\n\topacity: 0;\r\n}\r\n 98% {\r\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\r\n \tfilter: alpha(opacity=0);\r\n \topacity: 0;\r\n }\r\n 100% {\r\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\r\n \tfilter: alpha(opacity=100);\r\n \topacity: 1;\r\n }\r\n}\r\n@-moz-keyframes xfade {\r\n 0% {\r\n filter: alpha(opacity=100);\r\n opacity: 1;\r\n }\r\n14.67% {\r\n\tfilter: alpha(opacity=100);\r\n\topacity: 1;\r\n}\r\n16.67% {\r\n\tfilter: alpha(opacity=0);\r\n\topacity: 0;\r\n}\r\n 98% {\r\n filter: alpha(opacity=0);\r\n opacity: 0;\r\n }\r\n 100% {\r\n filter: alpha(opacity=100);\r\n opacity: 1;\r\n }\r\n}\r\n<\/pre>\n
\n@-webkit-keyframes<\/code>, @-ms-keyframes<\/code>, @-o-keyframes<\/code><\/p>\n
\n<\/a>3. Javascript Alternative Slideshows <\/h2>\n